Back to the app
Get Started
Backend
- Accounts & Multitenancy
- Action Cable
- Action Mailbox
- Action Text
- Active Storage
- Admin
- Announcements
- API
- API Clients
- Authentication
- Background Workers
- Billing & Payments
- Credentials
- Cron & Scheduled Jobs
- Databases
- Development
- Internationalization (I18n)
- Notifications
- Scaffolds
- Users
Frontend
- Alerts & Notices
- Branding
- Buttons
- Cards
- Forms
- Icons
- JavaScript
- Pagination
- Pills
- TailwindCSS
- Typography
- Wells
Extras
Turbo Native (iOS & Android)
Buttons
Default
<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>Outlined
<button class="btn btn-primary outline mr-2">Primary</button>
<button class="btn btn-secondary outline mr-2">Secondary</button>
<button class="btn btn-tertiary outline mr-2">Tertiary</button>
<button class="btn btn-danger outline mr-2">Danger</button>Small
<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>Large
<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>Default with Icon
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 %>
<button class="btn btn-primary mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a25xwopwqin6easaieq12tv4khpr2smh" class="fill-current icon-sm mr-2"><title id="a25xwopwqin6easaieq12tv4khpr2smh">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="ae2kewpzgvws6t404ytqn1uvi2lz9rtg" class="fill-current icon-sm mr-2"><title id="ae2kewpzgvws6t404ytqn1uvi2lz9rtg">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="ak72egmywbcw9y60o3oleqywii1jx41f" class="fill-current icon-sm mr-2"><title id="ak72egmywbcw9y60o3oleqywii1jx41f">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="a5jqpfiw4lpcm2bx496an7eu74fgzkc9" class="fill-current icon-sm mr-2"><title id="a5jqpfiw4lpcm2bx496an7eu74fgzkc9">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="a6onge0v9464lm5aelnxfos1htw5yqm0" class="fill-current icon-sm mr-2"><title id="a6onge0v9464lm5aelnxfos1htw5yqm0">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="a8ee5q6l780l7v1rsflfcg9t8a7tb6ia" class="fill-current icon-sm mr-2"><title id="a8ee5q6l780l7v1rsflfcg9t8a7tb6ia">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="adwkjjhgxnuxh43863qnpodlk36wjgnj" class="fill-current icon-xs ml-2"><title id="adwkjjhgxnuxh43863qnpodlk36wjgnj">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>Disabled
<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="anab5hr2llf46rg8ofgs9dajg91l8zh7" class="animate-spin inline-block h-4 w-4 mr-2"><title id="anab5hr2llf46rg8ofgs9dajg91l8zh7">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="aa3si5n8mj5llwgf8xylbdwbkwgw6wdz" class="animate-spin inline-block h-4 w-4 mr-2"><title id="aa3si5n8mj5llwgf8xylbdwbkwgw6wdz">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="aqrn25gpp99ac3t6o3ll3xetdi7m7x40" class="animate-spin inline-block h-4 w-4 mr-2"><title id="aqrn25gpp99ac3t6o3ll3xetdi7m7x40">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="ahb2f78ejqzumm3sfkjuzjcebvdrpc7m" class="animate-spin inline-block h-4 w-4 mr-2"><title id="ahb2f78ejqzumm3sfkjuzjcebvdrpc7m">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="a1303juniaj2dsbevwths643rf3g5d5f" class="animate-spin inline-block h-4 w-4 mr-2"><title id="a1303juniaj2dsbevwths643rf3g5d5f">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="and1c8bb72k3svq3tvl93uxf3niy0d6l" class="animate-spin inline-block h-4 w-4 mr-2"><title id="and1c8bb72k3svq3tvl93uxf3niy0d6l">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>