Components
Button
Button
Displays a button or a component that looks like a button.
Base
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-transparent">Transparent</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button><%= button_tag "Primary", type: "button", class: "btn btn-primary" %>
<%= button_tag "Secondary", type: "button", class: "btn btn-secondary" %>
<%= button_tag "Dark", type: "button", class: "btn btn-dark" %>
<%= button_tag "Light", type: "button", class: "btn btn-light" %>
<%= button_tag "Light", type: "button", class: "btn btn-white" %>
<%= button_tag "Danger", type: "button", class: "btn btn-danger" %>
<%= button_tag "Link", type: "button", class: "btn btn-link" %>= button_tag "Primary", type: "button", class: "btn btn-primary"
= button_tag "Secondary", type: "button", class: "btn btn-secondary"
= button_tag "Light", type: "button", class: "btn btn-light"
= button_tag "Dark", type: "button", class: "btn btn-dark"
= button_tag "White", type: "button", class: "btn btn-white"
= button_tag "Transparent", type: "button", class: "btn btn-transparent"
= button_tag "Danger", type: "button", class: "btn btn-danger"
= button_tag "Link", type: "button", class: "btn btn-link"Sizes
Choose from two additional buttons sizes outside of the default .btn class (.btn-lg, .btn-sm) or customize size with additional Tailwind CSS classes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Base button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button><%= button_tag "Large button", type: "button", class: "btn btn-primary btn-lg" %>
<%= button_tag "Base Button", type: "button", class: "btn btn-primary" %>
<%= button_tag "Small button", type: "button", class: "btn btn-primary btn-sm" %>= button_tag "Large button", type: "button", class: "btn btn-primary btn-lg"
= button_tag "Base Button", type: "button", class: "btn btn-primary"
= button_tag "Small button", type: "button", class: "btn btn-primary btn-sm"Expanded display
If you need a button to span fullwidth add the appropriate Tailwind CSS width and margin classes to existing button classes.
<button class="btn btn-primary w-full justify-center" type="button">Expanded button</button><%= button_tag "Expanded button", type: "button", class: "btn btn-primary w-full justify-center" %>= button_tag "Expanded button", type: "button", class: "btn btn-primary w-full justify-center"