Button

A native button with closed visual variants, sizes, and rendered state snapshots.

When to use it. Use it for caller-owned actions and native form submission.

Native baseline Exact fallback

Button primary example

<.button type="submit" variant={:default}>Save changes</.button>

<.button> The caller's native elements, names, and document relationships remain authoritative.
package CSS Package CSS applies scoped shadcn-style tokens, layout, focus, and state presentation without changing the native contract.
gallery only Theme switching, source copying, search, fixtures, and inspection controls on this page belong to the gallery only; :button does not ship them.
application boundary ShadcnUI does not add application state, authorization, persistence, transport events, or a JavaScript behavior layer to this component.

Examples use package semantic tokens in explicit light and dark scopes.

Icon presentation needs an explicit accessible label; disabled remains native.

Button support and fallback
Feature	Locked-engine evidence	When missing
Native baseline	Reviewed in the locked Chromium, Firefox, and WebKit evidence matrix.	The native button and label remain available without CSS or JavaScript.
Exact fallback	The locked-engine matrix retains the documented native or static outcome.	The native button and label remain available without CSS or JavaScript.

The application owns activation, authorization, requests, duplicate prevention, and outcomes.

Catalogue identity foundation.button, adapted from unscripted/ui commit bd8f403030c8d1f46804da6eda733fde7e908e63 under its MIT notice.

The documentation presentation is adapted locally; ShadcnUI's Phoenix API and native semantic contract remain authoritative.

Adapt button utility patterns to native HEEX button semantics, closed variants, and caller-owned activation.