# Tag

A short label with an item’s status: on time, late, down.

## Playground

```html
<span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Late</span>
```

## When to use

-   For an item’s status in a table, a list or a heading.

## When not to use

-   **For something clickable:** a tag is neither button nor link.
-   **To draw attention** ("New", "Featured" everywhere): that is the "noisy" one.
-   **For a notice:** Notice.

## Examples

### The four

Neutral, success, warning and error, always with the line around, so it does not vanish on a weak monitor. Never orange, always with icon and word.

Show code

```html
<span class="feitio-tag" data-status="warn">
  <svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>
```

### Small

Next to a name in a list or a menu, when the regular size would weigh too much: this site’s "soon" in the navigation is one.

Show code

```html
<span class="feitio-tag" data-size="small">em breve</span>
```

## Do and don’t

Do

Late

One word, with icon: readable from afar and without color.

Don’t

Late

Orange, all caps, a perfect pill and no icon.

## Writing

-   One or two words, an adjective or a state ("On time", "Late").

## Accessibility

-   The word is the status; the icon goes along (`aria-hidden`).

## Attributes

Attribute

Values

What for

`class="feitio-tag"`

required

The tag.

`data-status`

none, `"ok"`, `"warn"`, `"error"`

Neutral (no attribute), success, warning or error.

`data-size="small"`

optional

The small one, next to a name in a list.