Components
Button
Clickable actions and links with shadcn-style data-variant and data-size options.
Buttons use the .button class on a <button> or <a>. Choose a variant with
data-variant and a size with data-size. The default variant is the absence
of the attribute. Colors come from theme role tokens, so light/dark modes work automatically.
Variants
Loading components…
<div class="flex items-center gap-sm"> <button class="button" type="button">Default</button> <button class="button" data-variant="primary" type="button">Primary</button> <button class="button" data-variant="muted" type="button">Muted</button> <button class="button" data-variant="ghost" type="button">Ghost</button> <button class="button" data-variant="destructive" type="button">Destructive</button> <button class="button" data-variant="link" type="button">Link</button></div>With icons
Drop an inline <svg> beside the label; the button sizes the icon automatically.
Loading components…
<div class="flex items-center gap-sm"> <button class="button" data-variant="primary" type="button"> Start free trial <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button> <button class="button" type="button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <path d="M128,88a32,32,0,0,1,32-32h72V200H160a32,32,0,0,0-32,32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <path d="M24,200H96a32,32,0,0,1,32,32V88A32,32,0,0,0,96,56H24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="160" y1="96" x2="200" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="160" y1="128" x2="200" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="160" y1="160" x2="200" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> Read article </button></div>Icon-only
Use data-size="icon" (or icon-sm) for square, label-free buttons.
Loading components…
<div class="flex items-center gap-sm"> <button type="button" class="button" data-size="icon" aria-label="Open menu"> <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" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="4" y1="18" x2="20" y2="18" /> </svg> </button> <button type="button" class="button" data-variant="primary" data-size="icon" aria-label="Open menu" > <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" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="4" y1="18" x2="20" y2="18" /> </svg> </button> <button type="button" class="button" data-variant="muted" data-size="icon" aria-label="Open menu"> <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" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="4" y1="18" x2="20" y2="18" /> </svg> </button> <button type="button" class="button" data-variant="ghost" data-size="icon" aria-label="Open menu"> <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" aria-hidden="true" > <line x1="4" y1="6" x2="20" y2="6" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="4" y1="18" x2="20" y2="18" /> </svg> </button></div>With a keyboard shortcut
Drop a <kbd> child to show a shortcut hint, e.g. <button class="button">Search <kbd>⌘K</kbd></button>.
The button trims its trailing (or leading) padding so the key sits flush, with the inset tuned
per data-size.
API
| Attribute | Values |
|---|---|
data-variant | primary, muted, ghost, destructive, link (omit = default) |
data-size | sm, icon, icon-sm |
Restyle every button by overriding its tokens (--button-background, --button-radius,
--button-height, ...) at :root, or on a single instance inline. You never need to touch
zazz/styles/.