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

      • Button

      Live preview

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

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

      Or import only the base CSS, Button component CSS, and one style pack.

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

      Using CDN or bundler imports? See the Installation page.

      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 structure

      <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.

      Variants

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

      Sizes

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

      Use data-size="icon" or one of the icon size variants for square buttons. Icon-only buttons need an accessible name, usually with aria-label.

      Use data-icon="inline-start" or data-icon="inline-end" on inline icons when a text button needs icon-aware spacing. Use icon size variants only for icon-only buttons.

      To group related buttons, use the Button Group component.

      Examples

      Size

      Use data-size to change the size of the button.

      Live preview

      Default

      Live preview

      Outline

      Live preview

      Secondary

      Live preview

      Ghost

      Live preview

      Destructive

      Live preview
      Live preview

      Icon

      Live preview

      With icon

      Use data-icon="inline-start" or data-icon="inline-end" on inline icons to match upstream icon-aware spacing.

      Live preview

      Rounded

      Use the rounded-full class to make the button rounded.

      Live preview

      Spinner

      Live preview

      Button group

      To group related buttons, use the Button Group component.

      Live preview

      RTL

      Add dir="rtl" to the button or an ancestor. Flip directional icons explicitly.

      Live preview