Usage
import { Badge } from "chakra-ui-solid";<Badge>Badge</Badge>Examples
Icon
Render an icon within the badge directly.
The badge is an inline-flex row with a gap, so a glyph needs no wrapper — put it before or after
the label and the row spaces itself.
Variants
Badges come in different variants.
A fifth, plain, drops the box entirely and leaves the text in the palette’s foreground colour.
Sizes
Badges come in different sizes.
Props
| Prop | Default | Type |
|---|---|---|
size | 'sm' | ConditionalValue<'xs' | 'sm' | 'md' | 'lg' | PresetVariant<'badge', 'size'>>The text style and horizontal padding together, with a matching minimum height. |
variant | 'subtle' | ConditionalValue<'solid' | 'subtle' | 'outline' | 'surface' | 'plain' | PresetVariant<'badge', 'variant'>>How much of the palette the badge spends — `solid` fills it, `subtle` and `surface` tint it, `outline` is a ring alone, and `plain` is the text with no box at all. |
Plus HTMLChakraProps<"span"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.
The badge names no colour of its own. Every variant resolves against colorPalette, which is an
inherited style prop — so <Badge colorPalette="green"> and a colorPalette on any ancestor pick
the palette, and the four variants decide how much of it the badge spends.