All components (204)

Tag

Surfaces · Tag · .amset-label

What it is and when to use it

Status tag: paid, pending, overdue. It carries a dot in addition to the color, because color alone is not enough for someone who cannot tell it apart, and in a black-and-white printout it disappears.

When to use it

The status of a row, a card or a header: "Paid", "Pending", "Overdue", "Draft".
variant: soft (default), solid for what has to stand out, outline in long lists where so much colored background saturates, ghost (the dot and the text, with no box) for a table column.
size: 20, 24 or 28 px tall.
icon instead of the dot when a drawing says it better; withoutDot for those that are text only.
onRemove when it can be removed (a recipient, a filter): the cross appears.

When not to

Filters applied to a list: AppliedFilters, which are traversed with the arrows and removed with Delete.
Choosing several tags from a list or creating new ones: MultiSelect.
A notice with a whole sentence: Alert.

Keyboard: the tag is not focusable. With onRemove, the cross is a button with its Tab stop; Enter and Space press it. A 1rem circle is seen, but it is pressed in 24 × 24 px with a mouse and in 44 × 44 px with a finger: the extra area is transparent and extends outside the tag instead of enlarging it.

Accessibility: the dot and the icon are decorative (aria-hidden): the status is said by the text. A text that does not fit is cut with an ellipsis, but remains whole in the document, which is what the screen reader reads. The cross is named "Remove" and the text ("Remove Pending") when the text is a string; if what goes inside is not text, give it a name with removeLabel, which also serves to change it.

Fine-tuning: CSS variables --amset-label-*: -height, -padding, -slot, -font, -dot, -icon and -radius (999px gives pill-shaped tags); -remove-side is the side of the cross's pressable area (1.5rem; with a finger, --amset-target-touch). The tone colors go in --amset-label-tone, -tone-soft, -tone-solid and -tone-ink. info is the fixed information blue; accent, the brand color.

What it looks like

ActivePendingReview

<Tag tone="success">Active</Tag>
<Tag tone="warning">Pending</Tag>
<Tag tone="error" variant="soft">Review</Tag>

Props

Import it with import { Tag } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	Disabled: it can be read but not removed. The remove button comes out `disabled`, so the browser already denies it the click and the Tab, and the whole tag announces it with `data-disabled` for the CSS. It is for a tag that is imposed (a status the system decides, a mandatory filter) where hiding the cross would be worse: it disappears without explaining why.
`icon`	`ReactNode`	Custom icon instead of the dot.
`onRemove`	`() => void`	With this the cross appears to remove it (applied filters, recipients). A 1 rem circle is seen, but it is pressed in 24 × 24 px with a mouse and in the touch target (44 px) with a finger: the extra area is transparent and sticks out of the tag instead of enlarging it.
`removeLabel`	`string`	—
`size`	`"sm" \| "md" \| "lg"`	20, 24 or 28 px tall.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline" \| "ghost"`	How it is drawn: `soft` (background of the tone, default), `solid` (strong fill, for what has to stand out), `outline` (border only, for long lists where so much color would be overwhelming) or `ghost` (the dot and the text, with no box: for table columns).
`withoutDot`	`boolean`	Removes the dot: only for labels that already carry an icon or are text only.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-label-tone`	`var(--amset-ink-2)`
`--amset-label-tone-soft`	`var(--amset-surface-2)`
`--amset-label-tone-solid`	`var(--amset-ink)`
`--amset-label-tone-ink`	`var(--amset-surface)`
`--amset-label-height`	`1.5rem`
`--amset-label-padding`	`var(--amset-space-2)`
`--amset-label-slot`	`var(--amset-space-2)`
`--amset-label-font`	`var(--amset-text-sm)`
`--amset-label-dot`	`0.375rem`
`--amset-label-icon`	`0.875rem`
`--amset-label-radius`	`var(--amset-radius-sm)`
`--amset-label-background`	`var(--amset-label-tone-soft)`
`--amset-label-border`	`transparent`
`--amset-label-text`	`var(--amset-label-tone)`

How to change it

.amset-label {
  --amset-label-tone: ...;
  --amset-label-tone-soft: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: