formstexulinot agent-emittableapp
Button
button
A pressable action control with loading and optional link rendering.
Live examples
Default button
Default button
Loading demo…
Loading button
Loading button
Labelled submit button
Labelled submit button
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
variant | enum (default, secondary, outline, ghost, destructive, link) | no | "default" | — |
size | enum (sm, md, lg, icon) | no | "md" | — |
href | string | no | — | Optional link target (URL policy) |
hrefTrust | enum (developer, untrusted) | no | "developer" | — |
type | enum (button, submit, reset) | no | "button" | — |
disabled | boolean | no | false | — |
loading | boolean | no | false | — |
loadingLabel | string | no | — | Accessible name while loading |
autoLoading | boolean | no | true | Show pending when onclick returns a promise |
label | string | no | — | Plain-text label, escaped; replaces children when both are given |
onclick | event | no | — | Activated handler; may return a promise |
class | string | no | — | — |
children | slot | no | — | The visible label (an inline-text node in a tree) |
Keyboard
| Key | Action |
|---|---|
a | Rejected href schemes render as a non-interactive control |
Accessibility
- Real button or link element with an accessible name
- Busy state exposes aria-busy and disables further activation
- Rejected href schemes render as a non-interactive control
Evidence for button
Latest committed gates for button (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
texuli/button · budget 12.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Primary and secondary actions
- Submit and reset controls in forms
Don’t use when
Prefer another component
- An icon-only control (use icon-button)
- A toggleable filter chip (use chip)
- Navigation that is not an action (use a link or nav item)