#Button

#Usage

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

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

<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

#Sizes

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.

#Default

#Outline

#Secondary

#Ghost

#Destructive

#Link

#Icon

#With icon

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

#Rounded

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

#Spinner

#Button group

To group related buttons, use the Button Group component.

#RTL

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