Button

Breadcrumb
Button Group

Button

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/button.css";
@import "basecoat-css/styles/vega.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.

Default

Outline

Secondary

Ghost

Destructive

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.