Button

The button triggers an action with a click or key press. Use it for submitting forms, confirming decisions, and opening overlays like dialogs; for a set of related actions, attach several into a button group.

<button class="btn btn-outline">Button</button>
<button class="btn btn-outline btn-icon" aria-label="Submit">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
</button>

Usage

Add the btn class to a <button> or <a> element.

Class	Description
`btn`	Add to a `<button>` or `<a>` element
`btn-secondary` `btn-destructive` `btn-outline` `btn-ghost` `btn-link`	Add to `btn` to pick a variant
`btn-xs` `btn-sm` `btn-lg`	Add to `btn` to change the size
`btn-icon`	Add to `btn` for a square icon-only button; combines with any size
`btn-badge`	Add to a `<span>` inside the button for a corner count
`icon-start` `icon-end`	Add to a leading or trailing icon for the correct spacing

<button class="btn">Save changes</button>
<a href="/signup" class="btn btn-outline btn-lg">Sign up</a>

Examples

Variants

Use the variant classes to communicate intent and hierarchy.

<button class="btn">Default</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-destructive">Destructive</button>
<button class="btn btn-link">Link</button>

Size

Use the size classes to change the size of the button.

<div class="flex items-center gap-2">
  <button class="btn btn-outline btn-xs">Extra Small</button>
  <button class="btn btn-outline btn-xs btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>
 
<div class="flex items-center gap-2">
  <button class="btn btn-outline btn-sm">Small</button>
  <button class="btn btn-outline btn-sm btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>
 
<div class="flex items-center gap-2">
  <button class="btn btn-outline">Default</button>
  <button class="btn btn-outline btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>
 
<div class="flex items-center gap-2">
  <button class="btn btn-outline btn-lg">Large</button>
  <button class="btn btn-outline btn-lg btn-icon" aria-label="Submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
  </button>
</div>

With icons

Place an icon before or after the label, and add icon-start or icon-end to it for the correct spacing. For a square icon-only button, add btn-icon and give it an aria-label; for a loading state, pair disabled with a spinning icon.

<button class="btn btn-outline">
  <svg class="icon-start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
  Export
</button>
<button class="btn btn-outline">
  Open
  <svg class="icon-end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<button class="btn btn-outline btn-icon" aria-label="More">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
</button>
<button class="btn btn-outline" disabled>
  <svg class="icon-start animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
  Generating
</button>

With a badge

Add a <span> with btn-badge inside the button for a corner count; recolor it with background utilities like bg-destructive.

<button class="btn btn-outline btn-icon" aria-label="Open notifications">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/></svg>
  <span class="btn-badge bg-destructive">3</span>
</button>
<button class="btn btn-outline">
  Inbox
  <span class="btn-badge">12</span>
</button>

Button group

Attach related buttons into one segmented control with a button group.

<div class="btn-group">
  <button class="btn btn-outline">Archive</button>
  <button class="btn btn-outline">Report</button>
  <button class="btn btn-outline">Snooze</button>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. Flip directional icons with rtl:rotate-180. See the RTL guide for details.

<div id="button-rtl-demo" class="flex flex-wrap items-center gap-2" dir="rtl">
  <button class="btn btn-outline" data-i18n="button">زر</button>
  <button class="btn btn-destructive" data-i18n="delete">حذف</button>
  <button class="btn btn-outline">
    <span data-i18n="submit">إرسال</span>
    <svg class="icon-end rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
  </button>
  <button class="btn btn-outline btn-icon" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
  <button class="btn btn-secondary" disabled>
    <svg class="icon-start animate-spin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
    <span data-i18n="loading">جاري التحميل</span>
  </button>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", button: "زر", delete: "حذف", submit: "إرسال", loading: "جاري التحميل" },
    he: { dir: "rtl", button: "כפתור", delete: "מחק", submit: "שלח", loading: "טוען" },
    en: { dir: "ltr", button: "Button", delete: "Delete", submit: "Submit", loading: "Loading" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("button-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>