Badges
Dette indhold er ikke tilgængeligt i dit sprog endnu.
To display small pieces of information, such as a status or category, use the <Badge> component.
Import
Section titled “Import”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 different sizes
Section titled “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" /%}- New
- New and improved
- New, improved, and bigger
Customize badges
Section titled “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
Section titled “<Badge> Props”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.
variant
Section titled “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).
type: 'small' | 'medium' | 'large'
Defines the size of the badge to display.