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.

Use different sizes

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

Customize badges

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

<Badge> Props

Implementation: Badge.astro

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

text

required
type: string

The text content to display in the badge.

variant

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).

size

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

Defines the size of the badge to display.