Badges
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
To display small pieces of information, such as a status or category, use the <Badge>
component.
Import
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.
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" /%}
Customize badges
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;" /%}
<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.