---
title: "Buttons"
description: "Button styles in ASW — primary, secondary, and danger variants."
type: docs
weight: 33
date: 2026-04-11
tags: ["components", "buttons", "forms"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---

`<button>` elements are styled by default. Use `data-variant` to select secondary or danger appearances without adding utility classes.

## Inline Demo

<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
  <button>Primary</button>
  <button data-variant="secondary">Secondary</button>
  <button data-variant="danger">Danger</button>
  <button disabled>Disabled</button>
</div>