Badge
Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
Licensed
children
variant
The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
variant
size
fillStyle
overflowMode
API
<Badge>
<Icon />
<Text />
</Badge>
Badge
| Name | Type | Default |
|---|---|---|
children | ReactNode | Default: — |
| The content to display in the badge. | ||
styles | StylesProp | Default: — |
Spectrum-defined styles, returned by the style() macro. | ||
size | 'S'
| 'M'
| 'L'
| 'XL' | Default: 'S'
|
| The size of the badge. | ||
variant | 'accent'
| 'informative'
| 'neutral'
| 'positive'
| 'notice'
| 'negative'
| 'gray'
| 'red'
| 'orange'
| 'yellow'
| 'chartreuse'
| 'celery'
| 'green'
| 'seafoam'
| 'cyan'
| 'blue'
| 'indigo'
| 'purple'
| 'fuchsia'
| 'magenta'
| 'pink'
| 'turquoise'
| 'brown'
| 'cinnamon'
| 'silver' | Default: 'neutral'
|
| The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors. | ||
fillStyle | 'bold'
| 'subtle'
| 'outline' | Default: 'bold'
|
| The fill of the badge. | ||
overflowMode | 'wrap' | 'truncate' | Default: 'wrap'
|
| Sets the text behavior for the contents. | ||