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>