Components
Buttons
Theme
Hound
Framework
Tailwind CSS
Button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Add spacing modifier classes to offset buttons as necessary.
Buttons
Base
Buttons come as predefined components for rapid reusability. Every button will require a .btn class.
Add .btn-primary, .btn-dark, .btn-light, .btn-white, .btn-transparent or .btn-link to a given button to adopt a style of your choosing. You may extend the styles by adding additional CSS to the file inside app/assets/stylesheets/custom/buttons.css.
<button type="button" class="btn btn-primary">Primary</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-link">Link</button><%= button_tag "Primary", type: "button", class: "btn btn-primary" %>
<%= 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 "Link", type: "button", class: "btn btn-link" %>= button_tag "Primary", type: "button", class: "btn btn-primary"
= 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 "Link", type: "button", class: "btn btn-link"Buttons
Outline
Use outline buttons for less bold treatment and areas that benefit from a dark or lighter background color. Add the .btn-outline class to each theme-able button to achieve the outlined effect.
<button type="button" class="btn btn-primary btn-outline">Primary</button>
<button type="button" class="btn btn-dark btn-outline">Dark</button>
<button type="button" class="btn btn-light btn-outline">Light</button>
<button type="button" class="btn btn-white btn-outline">White</button><%= button_tag "Primary", type: "button", class: "btn btn-primary btn-outline" %>
<%= button_tag "Dark", type: "button", class: "btn btn-dark btn-outline" %>
<%= button_tag "Light", type: "button", class: "btn btn-light btn-outline" %>
<%= button_tag "White", type: "button", class: "btn btn-white btn-outline" %>= button_tag "Primary", type: "button", class: "btn btn-primary btn-outline"
= button_tag "Dark", type: "button", class: "btn btn-dark btn-outline"
= button_tag "Light", type: "button", class: "btn btn-light btn-outline"
= button_tag "White", type: "button", class: "btn btn-white btn-outline"Buttons
Sizes
<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"Buttons
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"