Skip to content

Badge

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

Preview

Note Success Tip Caution Danger Default

Usage

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

<Badge text="Note" variant="note" />
<Badge text="Success" variant="success" />
<Badge text="Tip" variant="tip" size="small" />
<Badge text="Caution" variant="caution" size="medium" />
<Badge text="Danger" variant="danger" size="large" />
<Badge text="Default" />

`<Badge>` Props

The <Badge> component accepts the same props as Starlight’s <Badge> component.