component :: Tags

The .tags component styles a list of tags. It supports both list and inline layouts, is accessible by default, and customizable via CSS custom properties.

File	Description	Source
`component.tags.css`	All tags styles (`.tags`)	Github

Playground

Variation

LayoutListInline

Copied!

<ul class="tags">
<li><a href="#">css</a></li>
<li><a href="#">astro</a></li>
<li><a href="#">basics</a></li>
</ul>

HTML

Custom properties

The following custom properties are available in settings.ui.css:

Property	Description
`--tags-padding`	Tag padding.
`--tags-font-size`	Tag font size.
`--tags-color`	Tag text color.
`--tags-background-color`	Tag background color.
`--tags-background-color-hover`	Tag hover background color.
`--tags-radius`	Tag border radius.

Available modifiers

Modifier	Description
`.tags`	Default style (list layout).
`.tags-inline`	Inline layout using flex.

Astro component

Prop	Type	Default	Description
`tagList`	`string[]`	`[]`	Array of tag strings to display.
`variant`	`string`	`inline`	Inline or list layout.
`url`	`string`	`/blog/tags`	Base URL to prepend to each tag.
`sort`	`boolean`	`false`	Sort tags alphabetically; input order is preserved by default.
`class`	`string`	`undefined`	Additional CSS classes, useful for helper classes.
`ariaLabel`	`string`	`'Tags'`	Accessible label for the tag list.
`data-testid`	`string`	`'tags'`	Test ID for testing purposes.

Examples

Astro example (frontmatter metadata)

---
import Tags from '../components/Tags.astro';
const { frontmatter } = Astro.props;
---
<Tags tagList={frontmatter.tags} url="/blog/tags" />

HTML example (list layout)

<ul class="tags">
  <li>
    <a href="/blog/tags/css">css</a>
  </li>
  <li>
    <a href="/blog/tags/astro">astro</a>
  </li>
  <li>
    <a href="/blog/tags/basics">basics</a>
  </li>
</ul>