# Badge

<flow-badge>

Stable

The badge component is used to draw attention to or tag other UI components.

# Examples

Set the color of the badge using one of the application palette named colors.

Set the pill option for a rounded tag-style badge.

Set the pulse attribute to draw attention when action is required.

Badges can be used to add a count or other annotations to buttons.

Property	Description	Type	Default
`color`	The color of the component. Colors are taken from the application palette.	`"danger" \| "gray" \| "primary" \| "secondary" \| "success" \| "warning"`	`'primary'`
`pill`	Set to true to draw a pill-style badge with rounded corners.	`boolean`	`false`
`pulse`	Set to true to make the badge pulse.	`boolean`	`false`

Slot	Description
`(default)`	The badge's content.

Name	Description
`--background-color`	The badge background color (default: primary).
`--color`	The text color (default: primary contrast).