Tag
A short label with an item’s status: on time, late, down.
On this page
Playground
Late
Status
Size
Background
<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
DraftOnlineLateDown
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
<span class="feitio-tag" data-status="warn">
<svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>Reactsoon
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
<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. |