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="an3v1gloohgqgk6dpnubt89j8fev7q67" class="fill-current icon-sm mr-2"><title id="an3v1gloohgqgk6dpnubt89j8fev7q67">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="ad1luoyadcopz8sfktrq6rn7eyo30bzv" class="fill-current icon-sm mr-2"><title id="ad1luoyadcopz8sfktrq6rn7eyo30bzv">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="ahpqhv3v182f31g7z7dr9lzbvjf2x7bb" class="fill-current icon-sm mr-2"><title id="ahpqhv3v182f31g7z7dr9lzbvjf2x7bb">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="a7rowlzmpueexj9a6mjschkep2t7niv4" class="fill-current icon-sm mr-2"><title id="a7rowlzmpueexj9a6mjschkep2t7niv4">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="ai6l0wt8wket9xapooa36k4tt0bjlm4l" class="fill-current icon-sm mr-2"><title id="ai6l0wt8wket9xapooa36k4tt0bjlm4l">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="arh8jr7ryi1t5rtophzyog1tqvmgzfik" class="fill-current icon-xs ml-2"><title id="arh8jr7ryi1t5rtophzyog1tqvmgzfik">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>