Action

Anatomy

Minimal button content: text, text with icon, and icon-only (aria_label).

Minimal

    <.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>

With icon

    <.action class="button">
  Text and icon <.heroicon name="hero-arrow-right" />
</.action>

Icon only

    <.action class="button ui-trigger--square" aria_label="Square icon button">
  <.heroicon name="hero-arrow-right" />
</.action>
<.action class="button ui-trigger--circle" aria_label="Circle icon button">
  <.heroicon name="hero-arrow-right" />
</.action>