Badges

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

New

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

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" />

- {% 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" /%}

• Note
• Success
• Tip
• Caution
• Danger

Use the size attribute to control the size of the badge text.

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

- <Badge text="New" size="small" />
- <Badge text="New and improved" size="medium" />
- <Badge text="New, improved, and bigger" size="large" />

- {% badge text="New" size="small" /%}
- {% badge text="New and improved" size="medium" /%}
- {% badge text="New, improved, and bigger" size="large" /%}

• New
• New and improved
• New, improved, and bigger

Customize badges by using any other <span> attributes such as class or style with custom CSS.

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

<Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />

{% badge text="Custom" variant="success" style="font-style: italic;" /%}

Custom

Implementation: Badge.astro

The <Badge> component accepts the following props and also any other <span> attributes:

required
type: string

The text content to display in the badge.

type: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
default: 'default'

The badge color variant to use: note (blue), tip (purple), danger (red), caution (orange), success (green), or default (theme accent color).

type: 'small' | 'medium' | 'large'

Defines the size of the badge to display.