Iryx UIFeedback
IBadge
A small label for status. Colour lives in the dot rather than the surface, so a column of them stays readable.
Without a dot
Drop dot and the badge is a plain label. Use it when the text already carries the meaning and there is no state to signal.
Sizes
In a table
One badge per row, scanned down a column.
| Reference | Client | Status |
|---|---|---|
| INV-1042 | Northwind Supply | |
| INV-1043 | Bluepeak Studio | |
| INV-1044 | Harbour Logistics |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Tints the dot, never the surface |
size | 'sm' | 'md' | 'lg' | 'md' | Badge scale |
dot | boolean | false | Shows the status dot |
label | string | — | Text, as an alternative to the default slot |
as | string | 'span' | Element to render |
asChild | boolean | false | Render the child instead, forwarding props |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, dot? } | — | Per-slot class overrides |
For a message with a body rather than a one-word status, use IAlert.