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
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="a8yc9g1ewr83ic13hq7cl47elin3fnew" class="fill-current icon-sm mr-2"><title id="a8yc9g1ewr83ic13hq7cl47elin3fnew">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="am1apnhvbyheezrfdct9ofhavmmwra29" class="fill-current icon-sm mr-2"><title id="am1apnhvbyheezrfdct9ofhavmmwra29">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="atm444dmezgupo43tw8g1jb5tng0k6x" class="fill-current icon-sm mr-2"><title id="atm444dmezgupo43tw8g1jb5tng0k6x">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="aniat04ampy7orbv2wq8mm1ygubniqi2" class="fill-current icon-sm mr-2"><title id="aniat04ampy7orbv2wq8mm1ygubniqi2">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="ab3yyzhl6jckwoof9tfdq8dfqidm1dnn" class="fill-current icon-sm mr-2"><title id="ab3yyzhl6jckwoof9tfdq8dfqidm1dnn">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="aqtb18sch4zkhyujgok8dq3s8qls8p96" class="fill-current icon-xs ml-2"><title id="aqtb18sch4zkhyujgok8dq3s8qls8p96">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>