徽章

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

Preview

新

导入

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

用法

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

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

MDX

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

<Badge text="注释" variant="note" />
<Badge text="成功" variant="success" />
<Badge text="提示" variant="tip" />
<Badge text="注意" variant="caution" />
<Badge text="危险" variant="danger" />

Markdoc

{% badge text="注释" variant="note" /%}
{% badge text="成功" variant="success" /%}
{% badge text="提示" variant="tip" /%}
{% badge text="注意" variant="caution" /%}
{% badge text="危险" variant="danger" /%}

Preview

注释 成功 提示 注意 危险

使用不同的尺寸

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

MDX

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

<Badge text="新" size="small" />
<Badge text="更新更强" size="medium" />
<Badge text="更新更强更逼格" size="large" />

Markdoc

{% badge text="新" size="small" /%}
{% badge text="更新更强" size="medium" /%}
{% badge text="更新更强更逼格" size="large" /%}

Preview

新 更新更强 更新更强更逼格

自定义徽章

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

MDX

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

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

Markdoc

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

Preview

自定义

<Badge> 的属性

实现： Badge.astro

<Badge> 组件接受以下属性，以及所有 其他的 <span> 属性：

text

必要属性
类型： string

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

variant

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

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

size

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

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