Aller au contenu
Starlight

Badges

Ce contenu n’est pas encore disponible dans votre langue.

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

Preview
New

Import

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

Usage

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

The size attribute controls the size of the badge text.

src/content/docs/example.mdx
import { Badge } from '@astrojs/starlight/components';


<Badge text="New" variant="tip" size="small" />
<Badge text="Deprecated" variant="caution" size="medium" />
<Badge text="Starlight" variant="note" size="large" />
Preview
New Deprecated Starlight

Customize badges

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

src/content/docs/example.mdx
import { Badge } from '@astrojs/starlight/components';


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

<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. See the “basic usage” guide for an example.

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). See the “basic usage” guide for an example.

size

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

Defines the size of the badge to display. See the “basic usage” guide for an example.