<div class="space-y-4">
<button class="btn btn-primary mr-2">Primary</button>
<button class="btn btn-secondary mr-2">Secondary</button>
<button class="btn btn-tertiary mr-2">Tertiary</button>
<button class="btn btn-danger mr-2">Danger</button>
<button class="btn btn-gray mr-2">Gray</button>
<button class="btn btn-white mr-2">White</button>
<button class="btn btn-link mr-2">Link</button>
<button class="btn btn-light-blue mr-2">Light Blue</button>
<button class="btn btn-light-green mr-2">Light Green</button>
<button class="btn btn-light-red mr-2">Light Red</button>
</div><div class="space-y-4">
<button class="btn btn-block btn-tertiary btn-outline mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ah7hc0tkphbrpd0w1o4zvighh9wb3vpj" class="fill-current icon-sm mr-2"><title id="ah7hc0tkphbrpd0w1o4zvighh9wb3vpj">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
Primary
</button>
</div><div class="space-y-4">
<a href="#" class="btn btn-primary btn-outline mr-2">Primary</a>
<a href="#" class="btn btn-secondary btn-outline mr-2">Secondary</a>
<a href="#" class="btn btn-tertiary btn-outline mr-2">Tertiary</a>
<a href="#" class="btn btn-danger btn-outline mr-2">Danger</a>
</div><div class="space-y-4">
<button class="btn btn-small btn-primary mr-2">Primary</button>
<button class="btn btn-small btn-secondary mr-2">Secondary</button>
<button class="btn btn-small btn-tertiary mr-2">Tertiary</button>
<button class="btn btn-small btn-danger mr-2">Danger</button>
<button class="btn btn-small btn-gray mr-2">Gray</button>
<button class="btn btn-small btn-white mr-2">White</button>
<button class="btn btn-small btn-link mr-2">Link</button>
</div><div class="space-y-4">
<button class="btn btn-large btn-primary mr-2">Primary</button>
<button class="btn btn-large btn-secondary mr-2">Secondary</button>
<button class="btn btn-large btn-tertiary mr-2">Tertiary</button>
<button class="btn btn-large btn-danger mr-2">Danger</button>
<button class="btn btn-large btn-gray mr-2">Gray</button>
<button class="btn btn-large btn-white mr-2">White</button>
<button class="btn btn-large btn-link mr-2">Link</button>
</div>See the Icons documentation for rendering SVGs inline.
<%= form.button do %>
<%= render_svg "icons/download", styles: "fill-current icon-sm mr-2", title: "my icon" %>
Primary
<% end %>
<div class="space-y-4">
<button class="btn btn-primary mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a6l3fe24uq0bmf2rkxkcxebngout71nf" class="fill-current icon-sm mr-2"><title id="a6l3fe24uq0bmf2rkxkcxebngout71nf">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
Primary
</button>
<button class="btn btn-secondary mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a58odsfpletj2k32wupxi9c5kqzxpnuq" class="fill-current icon-sm mr-2"><title id="a58odsfpletj2k32wupxi9c5kqzxpnuq">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
Secondary
</button>
<button class="btn btn-tertiary mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="apmzrw3rq1u9uokuwkmyk92o4zolcwpp" class="fill-current icon-sm mr-2"><title id="apmzrw3rq1u9uokuwkmyk92o4zolcwpp">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
Tertiary
</button>
<button class="btn btn-danger mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="aowl2ov2ss75wwxuu9cf7t3bksebztlr" class="fill-current icon-sm mr-2"><title id="aowl2ov2ss75wwxuu9cf7t3bksebztlr">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
Danger
</button>
<button class="btn btn-gray mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ad9qlcfvlg01hum72ahyk8alrvd49uqu" class="fill-current icon-sm mr-2"><title id="ad9qlcfvlg01hum72ahyk8alrvd49uqu">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
Gray
</button>
<button class="btn btn-white mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="alr3fqlbwakcba5buf5vsa5s813coonc" class="fill-current icon-sm mr-2"><title id="alr3fqlbwakcba5buf5vsa5s813coonc">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
White
</button>
<button class="btn btn-link mr-2">
Link <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="abjty1thcj343g61jjyswpev49dx7hmw" class="fill-current icon-xs ml-2"><title id="abjty1thcj343g61jjyswpev49dx7hmw">Icons/arrow right</title>
<path d="M16.172 9l-6.071-6.071 1.414-1.414L20 10l-.707.707-7.778 7.778-1.414-1.414L16.172 11H0V9z"></path></svg>
</button>
</div><div class="space-y-4">
<button class="btn btn-primary mr-2" disabled><span class="when-enabled">Primary</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="albrqp74wruj7l7p34ifb4ua8o5dtyfz" class="animate-spin inline-block h-4 w-4 mr-2"><title id="albrqp74wruj7l7p34ifb4ua8o5dtyfz">Icons/spinner</title>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
<button class="btn btn-secondary mr-2" disabled><span class="when-enabled">Secondary</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="akiv96p3nv7m50pr27398q0kfbw7uh8h" class="animate-spin inline-block h-4 w-4 mr-2"><title id="akiv96p3nv7m50pr27398q0kfbw7uh8h">Icons/spinner</title>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
<button class="btn btn-tertiary mr-2" disabled><span class="when-enabled">Tertiary</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="abgnunr3i0862ug5mrvur2iuvwdg9ol3" class="animate-spin inline-block h-4 w-4 mr-2"><title id="abgnunr3i0862ug5mrvur2iuvwdg9ol3">Icons/spinner</title>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
<button class="btn btn-danger mr-2" disabled><span class="when-enabled">Danger</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="atw0kvvd4niyv4tdejn8tukddkchido4" class="animate-spin inline-block h-4 w-4 mr-2"><title id="atw0kvvd4niyv4tdejn8tukddkchido4">Icons/spinner</title>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
<button class="btn btn-white mr-2" disabled><span class="when-enabled">White</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="aa2drrssggtiqcd7bnwhzjsu8mt2hhc5" class="animate-spin inline-block h-4 w-4 mr-2"><title id="aa2drrssggtiqcd7bnwhzjsu8mt2hhc5">Icons/spinner</title>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
<button class="btn btn-link mr-2" disabled><span class="when-enabled">Link</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="arxgfghyrrw6k9bzlqscyfqw8ii3tefx" class="animate-spin inline-block h-4 w-4 mr-2"><title id="arxgfghyrrw6k9bzlqscyfqw8ii3tefx">Icons/spinner</title>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
</div>