Badge
A small inline label used to highlight status, counts, or categories.
Usage
Pass a string as the first argument or use a block. Renders a span with rounded-full pill styling.
New
sui.badge "New"
Beta
sui.badge do "Beta" end
Variants
Use variant: to choose a colour scheme.
Default
sui.badge "Default", variant: :default
Secondary
sui.badge "Secondary", variant: :secondary
Destructive
sui.badge "Destructive", variant: :destructive
Outline
sui.badge "Outline", variant: :outline
Ghost
sui.badge "Ghost", variant: :ghost
Link
sui.badge "Link", variant: :link
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | Symbol | :default | Colour scheme โ one of :default :secondary :destructive :outline :ghost :link |
| name | String | nil | Label text when no block is given |
Next: Avatar โ