For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.3.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.3.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.3.0/components/button.md.
A3S UI
  • 简体中文
  • v0.3.0

      • 按钮

      实时预览

      用途

      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" 添加到按钮或祖先。明确翻转方向图标。

      实时预览