badge

Fragment reference badge

tags

ui

Badges are used to draw attention and display statuses or counts.

Usage

badge Badge

Variants

Set the variant attribute to change the badge’s theme.

badge(variant="brand") Brand
badge(variant="success") Success
badge(variant="warning") Warning
badge(variant="danger") Danger

Appearance

Use the appearance attribute to change the badge’s visual appearance.

badge(appearance="filled" variant="neutral") Filled
badge(appearance="outlined" variant="neutral") Outlined

Pill Badges

Use the pill attribute to give badges rounded edges.

badge(variant="brand" pill) Brand

Start & End Decorations

Use the icon attribute to add presentational elements alongside the badge’s label.

badge(icon="acorn") Start

Attributes

Name	Type	Default	Description
variant	brand | neutral | success | warning | danger	brand	The badge’s theme variant.
appearance	accent | filled | outlined | filled-outlined	accent	The badge’s visual appearance.
pill	boolean	false	Draws a pill-style badge with rounded edges.
attention	none | pulse | bounce	none	Adds an animation to draw attention.