按钮

用途

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/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

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

Add your button HTML

<button type="button" class="btn">Primary</button>
<button type="button" class="btn" data-variant="outline">Outline</button>
<button type="button" class="btn" data-variant="secondary" data-size="sm">Small secondary</button>
<button type="button" class="btn" data-variant="outline" data-size="icon" aria-label="Settings"><svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg></button>

Add class="btn" to a <button> or <a>. Add data-variant and data-size when needed. Add data-icon="inline-start" or data-icon="inline-end" to inline icons when a text button needs icon-aware spacing.

HTML 结构

<button class="btn">: Button root. Use a native <button> for actions and <a> for navigation.
data-variant="primary|secondary|outline|ghost|link|destructive" Optional: Visual variant. Omit it for the primary variant.
data-size="xs|sm|default|lg|icon|icon-xs|icon-sm|icon-lg" Optional: Button size. Omit it for the default size.

变体

变体	标记
Primary	`<button class="btn">`
Secondary	`<button class="btn" data-variant="secondary">`
Outline	`<button class="btn" data-variant="outline">`
Ghost	`<button class="btn" data-variant="ghost">`
Link	`<button class="btn" data-variant="link">`
Destructive	`<button class="btn" data-variant="destructive">`

尺寸

尺寸	标记
Extra small	`<button class="btn" data-size="xs">`
Small	`<button class="btn" data-size="sm">`
Default	`<button class="btn">`
Large	`<button class="btn" data-size="lg">`
Icon extra small	`<button class="btn" data-size="icon-xs">`
Icon small	`<button class="btn" data-size="icon-sm">`
Icon	`<button class="btn" data-size="icon">`
Icon large	`<button class="btn" data-size="icon-lg">`

使用 data-size="icon" 或方形按钮的图标大小变体之一。仅图标按钮需要一个可访问的名称，通常为 aria-label。

当文本按钮需要图标感知间距时，在内联图标上使用 data-icon="inline-start" 或 data-icon="inline-end"。仅对纯图标按钮使用图标大小变体。

要对相关按钮进行分组，请使用Button Group组件。

示例

尺寸

使用data-size更改按钮的大小。

默认

概要

次要

幽灵

破坏性

链接

图标

带图标

在内联图标上使用 data-icon="inline-start" 或 data-icon="inline-end" 以匹配上游图标感知间距。

圆形

使用 rounded-full 类使按钮变圆。

旋转器

按钮组

要对相关按钮进行分组，请使用Button Group组件。

RTL

将 dir="rtl" 添加到按钮或祖先。明确翻转方向图标。

#按钮

#用途

Include CSS

Add your button HTML

#HTML 结构

#变体

#尺寸

#示例

#尺寸

#默认

#概要

#次要

#幽灵

#破坏性

#链接

#图标

#带图标

#圆形

#旋转器

#按钮组

#RTL

按钮

用途

HTML 结构

变体

尺寸

示例

尺寸

默认

概要

次要

幽灵

破坏性

链接

图标

带图标

圆形

旋转器

按钮组

RTL