Badge
@stellaria/nebula-webBadgePropsPreview
Props
10| Prop | Type | Default |
|---|---|---|
children The label. A badge is a `span` with no role of its own, so this text is all a screen reader gets — a status shown by colour alone does not reach one. | ReactNode | — |
className | string | — |
color The scale the variant and the dot draw from. It is also the whole semantic signal of a status badge, which is why the label has to repeat it in words. | ColorExtended | "primary" |
dot Puts a coloured dot before the label, taking the 600 step of `color` regardless of how pale the variant is. It is the status cue that survives a `"light"` badge on a busy row. | boolean | false |
fullWidth Stretches the pill to its container instead of hugging the label. | boolean | false |
leftSection An adornment before the label. It is `aria-hidden`, so it can only repeat what the label says. | ReactNode | — |
radius How round the pill is. | "sm" | "md" | "full" | "full" |
rightSection The same after the label, but this one is NOT `aria-hidden` — it is read out, which is what makes it the place for a count or a dismiss control rather than a decorative glyph. | ReactNode | — |
size Height, padding and type of the pill together. It does not follow the text it sits beside, so a badge inside small print has to be stepped down by hand. | Size | "md" |
variant How the pill is filled. `"light"` is the tinted wash that sits in a table or a list without competing with the row; the solid ones pull enough attention to read as a control. | BadgeVariant | "light" |
Slot props
3Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
dotProps The colour dot. Only rendered with `dot`; its colour comes from the scale, not from the stylesheet. | BoxSlotProps | — |
leftSectionProps Wrapper for `leftSection`. | BoxSlotProps | — |
rightSectionProps Wrapper for `rightSection`. | BoxSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.