Badge
Badges can be used to highlight information such as status, category, and count.
Theme
<sa-badge variant="BadgeVariant.Default">
<sa-icon name="plane"/>
Flight Booked
</sa-badge>
<sa-badge variant="BadgeVariant.Secondary">Requires Visa</sa-badge>
<sa-badge variant="BadgeVariant.Destructive">
<sa-icon name="flame"/>
Overbooked
</sa-badge>Usage
Wrap the text in an <sa-badge> and pick a variant.
<sa-badge variant="...">...</sa-badge>Examples
Variants
Use variants to communicate different types of information categories.
Theme
<sa-badge>Default</sa-badge>
<sa-badge variant="BadgeVariant.Secondary">Secondary</sa-badge>
<sa-badge variant="BadgeVariant.Destructive">Destructive</sa-badge>
<sa-badge variant="BadgeVariant.Outline">Outline</sa-badge>
<sa-badge variant="BadgeVariant.Ghost">Ghost</sa-badge>
<sa-badge variant="BadgeVariant.Link">Link</sa-badge>Icon on the left
Place an <sa-icon> before the text to show an icon on the left.
Theme
<sa-badge>
<sa-icon name="badge-check"/>
Default
</sa-badge>
<sa-badge variant="BadgeVariant.Secondary">
<sa-icon name="badge-check"/>
Secondary
</sa-badge>
<sa-badge variant="BadgeVariant.Destructive">
<sa-icon name="badge-check"/>
Destructive
</sa-badge>
<sa-badge variant="BadgeVariant.Outline">
<sa-icon name="badge-check"/>
Outline
</sa-badge>
<sa-badge variant="BadgeVariant.Ghost">
<sa-icon name="badge-check"/>
Ghost
</sa-badge>
<sa-badge variant="BadgeVariant.Link">
<sa-icon name="badge-check"/>
Link
</sa-badge>Icon on the right
Place the <sa-icon> after the text to show it on the right.
Theme
<sa-badge>
Default
<sa-icon name="arrow-right"/>
</sa-badge>
<sa-badge variant="BadgeVariant.Secondary">
Secondary
<sa-icon name="arrow-right"/>
</sa-badge>
<sa-badge variant="BadgeVariant.Destructive">
Destructive
<sa-icon name="arrow-right"/>
</sa-badge>
<sa-badge variant="BadgeVariant.Outline">
Outline
<sa-icon name="arrow-right"/>
</sa-badge>
<sa-badge variant="BadgeVariant.Ghost">
Ghost
<sa-icon name="arrow-right"/>
</sa-badge>
<sa-badge variant="BadgeVariant.Link">
Link
<sa-icon name="arrow-right"/>
</sa-badge>With spinner
An <sa-spinner> inside a badge indicates an in-progress state.
Theme
<sa-badge>
<sa-spinner/>
Default
</sa-badge>
<sa-badge variant="BadgeVariant.Secondary">
<sa-spinner/>
Secondary
</sa-badge>
<sa-badge variant="BadgeVariant.Destructive">
<sa-spinner/>
Destructive
</sa-badge>
<sa-badge variant="BadgeVariant.Outline">
<sa-spinner/>
Outline
</sa-badge>
<sa-badge variant="BadgeVariant.Ghost">
<sa-spinner/>
Ghost
</sa-badge>
<sa-badge variant="BadgeVariant.Link">
<sa-spinner/>
Link
</sa-badge>Long text
Long text wraps inside the badge rather than being truncated.
Theme
<sa-badge variant="BadgeVariant.Secondary">
Awaiting passport details for all four travellers before ticketing
</sa-badge>Custom colors
Override the colors with your own utility classes on class. Include dark: variants so the badge holds up in dark mode.
Theme
<sa-badge class="bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50">
Blue
</sa-badge>
<sa-badge class="bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50">
Green
</sa-badge>
<sa-badge class="bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50">
Sky
</sa-badge>
<sa-badge class="bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50">
Purple
</sa-badge>
<sa-badge class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
Blue
</sa-badge>
<sa-badge class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
Green
</sa-badge>
<sa-badge class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">
Sky
</sa-badge>
<sa-badge class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">
Purple
</sa-badge>
<sa-badge class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
Red
</sa-badge>API Reference
<sa-badge>
Renders a <span> element.
Prop
Type