徽章

BadgeSecondaryDestructiveOutline

用途

Include CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、任务组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/badge.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

Add your badge HTML

将 class="badge" 添加到内联元素。当徽章不是默认主要变体时添加 data-variant。

内联 SVG 图标自动按间隙间隔开。

<span class="badge">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge" data-variant="destructive">Destructive</span>
<span class="badge" data-variant="outline">Outline</span>
<span class="badge" data-variant="ghost">Ghost</span>

徽章通过原生文本流支持从右到左的布局。明确翻转方向图标。

示例

变体

使用 data-variant 更改徽章变体。

DefaultSecondaryDestructiveOutlineGhost

带图标

在图标上使用 data-icon="inline-start" 或 data-icon="inline-end" 以实现图标感知间距。

Verified

Bookmark

带旋转器

将内联加载图标与 data-icon="inline-start" 或 data-icon="inline-end" 结合使用。

Deleting

Generating

链接

Open Link

自定义颜色

BlueGreenSkyPurpleRed

RTL

شارةثانويمدمرمخطط

متحقق

إشارة مرجعية

#徽章

#用途

Include CSS

Add your badge HTML

#示例

#变体

#带图标

#带旋转器

#链接

#自定义颜色

#RTL

徽章

用途

示例

变体

带图标

带旋转器

链接

自定义颜色

RTL