Badge

Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.

Licensed

children

variant

size

fillStyle

overflowMode

import {Badge} from '@react-spectrum/s2/Badge';

<Badge variant="positive">Licensed</Badge>

API

<Badge>
  <Icon />
  <Text />
</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.