Skip to content

Action · Style

Color, size, corner radius, shape, and disabled modifiers on class="button".

Color

    <.action class="button">Default</.action>
<.action class="button button--accent">Accent</.action>
<.action class="button button--brand">Brand</.action>
<.action class="button button--alert">Alert</.action>
<.action class="button button--info">Info</.action>
<.action class="button button--success">Success</.action>

Size

    <.action class="button button--sm">Small</.action>
<.action class="button">Medium</.action>
<.action class="button button--lg">Large</.action>
<.action class="button button--xl">XL</.action>

Rounded

    <.action class="button rounded-none">None</.action>
<.action class="button rounded-sm">SM</.action>
<.action class="button rounded-md">MD</.action>
<.action class="button rounded-lg">LG</.action>
<.action class="button rounded-xl">XL</.action>
<.action class="button rounded-full">Full</.action>

Shape

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

Disabled

    <.action class="button" disabled>Disabled</.action>
<.action class="button button--accent" disabled>Disabled</.action>
<.action class="button button--square" aria_label="Disabled" disabled>
  <.heroicon name="hero-arrow-right" />
</.action>