徽章

要显示小段信息，例如状态或类别，请使用 <Badge> 组件。

预览

新

导入

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

用法

使用 <Badge> 组件显示徽章，并将要显示的内容传递给 <Badge> 组件的 text 属性。

默认情况下，徽章将使用您网站的主题强调色。要使用内置的徽章颜色，请将 variant 属性设置为支持的值之一。

MDX

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

Markdoc

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

预览

• 注释
• 成功
• 提示
• 警告
• 危险

使用不同尺寸

使用 size 属性来控制徽章文本的大小。

MDX

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

Markdoc

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

预览

• 新
• 新的和改进的
• 新的、改进的、更大的

自定义徽章

通过使用任何其他 <span> 属性（例如 class 或 style）和自定义 CSS 来自定义徽章。

MDX

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

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

Markdoc

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

预览

自定义

<Badge> 属性

实现： Badge.astro

<Badge> 组件接受以下属性以及任何其他 <span> 属性

text

必需
类型： string

要在徽章中显示的文本内容。

variant

类型： 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
默认值： 'default'

要使用的徽章颜色变体：note (蓝色)、tip (紫色)、danger (红色)、caution (橙色)、success (绿色) 或 default (主题强调色)。

size

类型： 'small' | 'medium' | 'large'

定义要显示的徽章的大小。