Trigger an action using a native <button> element.
Works with
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/button.css" />Default
<button>Click me</button>With icon
<button>
<svg><!-- icon --></svg>
Download
</button>With kbd or Badge
<style>
button {
min-width: 10rem;
}
</style>
<button>
<svg><!-- save --></svg>
Save
<kbd>⌘S</kbd>
</button>
<button class="outlined">
Find
<kbd>⌘K</kbd>
</button>Outlined
<button class="outlined">Click me</button>Secondary
<button class="secondary">Click me</button>Ghost
<button class="ghost">Click me</button>Destructive
<button class="destructive">Delete</button>
<button class="ghost destructive">Delete</button>Link
<button class="link">Click me</button>Round
<button class="round" aria-label="Profile">
<svg>...</svg>
</button>Square
Add .square for equal padding on all sides, which is what an icon button wants.
<button class="square" aria-label="Upload">
<svg>...</svg>
</button>
<button class="square" aria-label="Settings">
<svg>...</svg>
</button>Loading
Set aria-busy to show an animated spinner before the
label.
<button aria-busy>Please wait…</button>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Variant | .secondary.outlined.ghost.link |
Changes the surface. Pick one |
| Color | .destructive |
Red, for dangerous actions |
| Shape | .square |
Same width and height, for icon buttons |
| Corners | .round |
Fully round corners |
| Disabled | [disabled][aria-disabled="true"] |
Blocks the button and fades it |
| Loading | [aria-busy] |
Shows a spinner |
| Popover | [popovertarget] |
Looks pressed while its popover is open |