Fabrials UI

Loading state

DraftCurrentStaleFailedPreview

Synced3 h oldExpiredPaused

MITv0.9.0New12

TravelTravel, archivedA label that is far too long for its row

Installation

Import the control from @fabrials/ui, after setting the app up.
TypeScript
```
import { Badge } from "@fabrials/ui";
```

API reference

Prop / export	Type	Description
`tone`	`neutral \| info \| success \| warning \| danger`	Color is paired with the word.
`variant`	`soft \| outline \| solid`	soft for status, outline for facts such as a license or version, solid for a count that must stand out.
`dot`	`boolean \| hollow`	A square marker before the text, like one pixel of the dither. hollow is an outline dot for an archived or inactive item.
`dotColor`	`string`	Colours the dot alone with any CSS colour (var(--label-tone)); it sets --fui-badge-dot.
`truncate`	`boolean`	The tag shrinks to its container and cuts long text with an ellipsis; the full text goes to the title. --fui-badge-max caps the width.
`--fui-badge-solid / --fui-badge-ink`	`CSS properties`	Public. A tag whose colour is data sets --fui-badge-solid (tint, hairline, dot) and, if needed, --fui-badge-ink (text) on the badge itself (a class or style, not an ancestor); tones only set their defaults.

Behavior

A small tag with 3 px corners, never a pill. Color is not the only signal: the text says what the status is. A data colour tints the tag while the ink stays neutral, so the name reads on any colour.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.