# Tags

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/tags

<div class="prose">
  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.
</div>

<Tags tagList={["css", "astro", "basics"]} class="mt-sm2 mb-sm2" />

<div class="prose">

<div class="docs_oversizedTable">

| File                 | Description | Source      |
| -------------------- | ----------- | ----------- |
| `component.tags.css` | All tags styles (`.tags`) | [Github][1] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tags.css

</div>

## Playground

<Playground
  client:visible
  template={`<ul class="{classes}">
  <li><a href="#">css</a></li>
  <li><a href="#">astro</a></li>
  <li><a href="#">basics</a></li>
</ul>`}
  baseClasses="tags"
  controls={[
    { heading: "Variation", items: [
      { type: "select", name: "layout", label: "Layout", default: "", options: [
        { label: "List", value: "" },
        { label: "Inline", value: "tags-inline" },
      ]},
    ]},
  ]}
/>

## HTML

### Custom properties

The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

| 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

<div class="docs_oversizedTable">

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

</div>

## Astro component

<div class="docs_oversizedTable prose">

| 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](/docs/helpers). |
| `ariaLabel`   | `string`   | `'Tags'`    | Accessible label for the tag list.                          |
| `data-testid` | `string`   | `'tags'`    | Test ID for testing purposes.                               |

</div>

## Examples

<ul class="docs_examples">
<li>

### Astro example (frontmatter metadata)

<Tags tagList={["css", "astro", "basics"]} url="/blog/tags" />

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

</li>

<li>

### 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>

```html
<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>
```

</li>
</ul>