Renders a button element for actions based on Phoenix Core Components. Use the type attribute to set the button type. Icon-only buttons must pass aria_label to screen readers.

Anatomy

<.action class="button">Send!</.action>

<.action class="button" phx-click="go">Send!</.action>

<.action class="button" type="submit">Save</.action>

<.action class="button" aria_label="Close dialog">
  <.heroicon name="hero-x-mark" aria-hidden="true" />
</.action>

Style

Import tokens and button.css, then set class="button" on <.action>.

@import "../corex/corex.css";

Stack modifiers on the host. Combine axes, for example button ui-accent ui-size-lg or button ui-info.

Axes: Semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), Variant (ui-solid), Size (ui-size-sm … ui-size-xl), Radius (ui-rounded-*). See the modifier guide.

Semantic modifiers set palette variables. Add ui-solid for a filled button. Default is subtle.

Semantic

Palette variables for button ink and fill. Does not change surface treatment by itself.

Variant

Size

Rounded

Shape