# Tag

A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.

Kit part · Free · https://tactileui.dev/parts/tag

- Element: `<span>`
- Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit))
- Categories: Badges & tags
- Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED
- Volumes: Tactile, Quiet

## Variants

### Plain

```html
<span class="tui-tag">HTTP</span>
```

### Solid

```html
<span class="tui-tag tui-tag--solid">Most teams</span>
```

### With a lamp

```html
<span class="tui-tag"><span class="tui-lamp" data-on></span>Live</span>
```

## Every state

- Plain
- Solid
- Live
- Waiting

Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real.

## API

| Name | Kind | Values | What it does |
| - | - | - | - |
| .tui-tag | class | on | 22px, 10px upper-case tracked type, a hairline border. |
| .tui-tag--solid | class | — | Printed in the contrast colours. One per view. |
| .tui-lamp inside | element | — | For live states. |

## Markup

```html
<span class="tui-tag">HTTP</span>
<span class="tui-tag tui-tag--solid">Most teams</span>
<span class="tui-tag"><span class="tui-lamp" data-on></span>Live</span>
```

The demo on the page:

```html
<div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center"><span class="tui-tag">HTTP</span><span class="tui-tag">Cron</span><span class="tui-tag">12 checks</span><span class="tui-tag"><span class="tui-lamp" data-on></span>Live</span><span class="tui-tag"><span class="tui-lamp" data-lamp="amber" data-on></span>Charging</span><span class="tui-tag tui-tag--solid">Most teams</span></div>
```

## Usage notes

Tags are printed, not pressed: no light, no shadow.

## Accessibility

- Tags are text. Keep them short; upper case is a style, so write them in sentence case in the markup and let the CSS lift them.

## How it’s built

A hairline border in `--tui-rule`, a faint face and upper-case tracked type. The solid version borrows the contrast cap’s colours. Level with the plate: no light, no shadow.

## Rules

Solid for the one tag that must stand out, like “Most teams”.

The full rules are in `tag.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.
- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.