Skip to content
Starlight Tags

PageTags Demo

This page demonstrates the PageTags component, which automatically reads and displays tags from the current page’s frontmatter.

Default (Inline)

Section titled “Default (Inline)”

The simplest usage - just drop in the component:

<PageTags />

Block Layout

Section titled “Block Layout”

Full-width with borders:

<PageTags layout="block" />

With Label

Section titled “With Label”

Add a text label before the tags:

<PageTags label="Topics:" />

Sizes

Section titled “Sizes”

Small (Default)

Section titled “Small (Default)”

Medium

Section titled “Medium”

Large

Section titled “Large”

Style Variants

Section titled “Style Variants”

Outline (Default)

Section titled “Outline (Default)”

Solid

Section titled “Solid”

Ghost

Section titled “Ghost”

Without Icons

Section titled “Without Icons”
<PageTags showIcon={false} />

Combined Options

Section titled “Combined Options”

Block layout with label, medium size, and solid variant:

<PageTags layout="block" label="This guide covers:" size="medium" variant="solid" />

See the PageTags documentation for full API reference.