Button

Actions and links with consistent sizing.

Default

<button type="button" class="<%= button_class(variant: :default, size: :sm) %>">Button</button>
<button type="button" class="<%= button_class(variant: :default, size: :base) %>">Button</button>
<button type="button" class="<%= button_class(variant: :default, size: :lg) %>">Button</button>
<button type="button" class="<%= button_class(variant: :default, size: :nav) %>">Button</button>

Accent

<button type="button" class="<%= button_class(variant: :accent, size: :sm) %>">Button</button>
<button type="button" class="<%= button_class(variant: :accent, size: :base) %>">Button</button>
<button type="button" class="<%= button_class(variant: :accent, size: :lg) %>">Button</button>
<button type="button" class="<%= button_class(variant: :accent, size: :nav) %>">Button</button>

Secondary

<button type="button" class="<%= button_class(variant: :secondary, size: :sm) %>">Button</button>
<button type="button" class="<%= button_class(variant: :secondary, size: :base) %>">Button</button>
<button type="button" class="<%= button_class(variant: :secondary, size: :lg) %>">Button</button>
<button type="button" class="<%= button_class(variant: :secondary, size: :nav) %>">Button</button>

Glass

<button type="button" class="<%= button_class(variant: :glass, size: :sm) %>">Button</button>
<button type="button" class="<%= button_class(variant: :glass, size: :base) %>">Button</button>
<button type="button" class="<%= button_class(variant: :glass, size: :lg) %>">Button</button>
<button type="button" class="<%= button_class(variant: :glass, size: :nav) %>">Button</button>

Ghost

<button type="button" class="<%= button_class(variant: :ghost, size: :sm) %>">Button</button>
<button type="button" class="<%= button_class(variant: :ghost, size: :base) %>">Button</button>
<button type="button" class="<%= button_class(variant: :ghost, size: :lg) %>">Button</button>
<button type="button" class="<%= button_class(variant: :ghost, size: :nav) %>">Button</button>

Danger

<button type="button" class="<%= button_class(variant: :danger, size: :sm) %>">Button</button>
<button type="button" class="<%= button_class(variant: :danger, size: :base) %>">Button</button>
<button type="button" class="<%= button_class(variant: :danger, size: :lg) %>">Button</button>
<button type="button" class="<%= button_class(variant: :danger, size: :nav) %>">Button</button>

Full width

<button type="button" class="<%= button_class(variant: :accent, block: true) %>">Button</button>

Icons, loading and disabled

As a link

<button type="button" class="<%= button_class(variant: :accent) %>"><%= heroicon "plus", options: { "aria-hidden": true } %>New project</button>
<button type="button" class="<%= button_class(variant: :accent) %>" disabled><span class="<%= spinner_class(size: :sm) %>" aria-hidden="true"></span>Saving</button>
<button type="button" class="<%= button_class(variant: :accent) %>" disabled>Unavailable</button>
<a href="#main" class="<%= button_class(variant: :accent) %>">As a link<%= heroicon "arrow-up-right", options: { "aria-hidden": true } %></a>

API reference

button_class

button_class(variant: :default, size: :base, block: false, extra: nil)

Parameter	Default	Values
variant	:default	:default · :accent · :secondary · :glass · :ghost · :danger
size	:base	:sm · :base · :lg · :nav
block	false	true · false
extra	nil	Additional Tailwind classes

spinner_class

spinner_class(size: :base, extra: nil)

Parameter	Default	Values
size	:base	:sm · :base · :lg
extra	nil	Additional Tailwind classes