Back to the app
Get Started
Backend
- Accounts & Multitenancy
- Action Cable
- Action Mailbox
- Action Text
- Active Storage
- Admin
- Announcements
- API
- Authentication
- Background Workers
- Billing & Payments
- Credentials
- Cron & Scheduled Jobs
- Databases
- Development
- Internationalization (I18n)
- Notifications
- Scaffolds
- Users
- Webpacker
Frontend
Extras
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-white primary mr-2">White</button>
<button class="btn btn-link mr-2">Link</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-white primary 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-white primary 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="aa964hhjm6nnwjsbjkfrpvff5nui2qdi" class="fill-current icon-sm mr-2"><title id="aa964hhjm6nnwjsbjkfrpvff5nui2qdi">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="ab0wzgu5g87xn8333nfd8k3pycq7rkf8" class="fill-current icon-sm mr-2"><title id="ab0wzgu5g87xn8333nfd8k3pycq7rkf8">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="ahbi7a64zme8psxeu4pu0yh7zbvqhjyb" class="fill-current icon-sm mr-2"><title id="ahbi7a64zme8psxeu4pu0yh7zbvqhjyb">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="asxp5wws8pjvtf0cjpf55s8r8bso4doi" class="fill-current icon-sm mr-2"><title id="asxp5wws8pjvtf0cjpf55s8r8bso4doi">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
Danger
</button>
<button class="btn btn-white primary mr-2">
<svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a3fkbkrc1cddggk45a5j1vv0t00u6mkm" class="fill-current icon-sm mr-2"><title id="a3fkbkrc1cddggk45a5j1vv0t00u6mkm">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="alsgeoe5ddun0wzxxjyeesrakd9dnqwj" class="fill-current icon-xs ml-2"><title id="alsgeoe5ddun0wzxxjyeesrakd9dnqwj">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>