Badge

Components

Badges

To display small pieces of information, such as a status or category, use the <Badge> component.

Import

import { Badge } from '@astrojs/starlight/components'

Usage

Display a badge using the <Badge> component and pass the content you want to display to the text attribute of the <Badge> component.

By default, the badge will use the theme accent color of your site. To use a built-in badge color, set the variant attribute to one of the supported values.

import { Badge } from '@astrojs/starlight/components';

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" />
<Badge text="Caution" variant="caution" />
<Badge text="Danger" variant="danger" />

Preview

Variants

Note Success Tip Caution Danger