Button

A button to use in forms or for single actions

Variants

Button button

A basic button

Block button button--block

A full-width button

  • 

    <button>A regular button</button>

<a href="#" class="button">A link styled as a button</a>

<button class="button--secondary">A secondary button</button>

<button class="button--danger">A danger button</button>
    

    

    <%= form.button :submit %>

<%= link_to "a link styled as a button", link_path, class: "button" %>

<%= form.button :submit, class: "button--secondary" %>

<%= form.button :submit, class: "button--danger" %>
    

  • 

    <button class="button--block">
  Button Text
</button>
    

    

    <%= form.button :submit, class: "button--block" data: { disable_with: t(".updating") } %>

Usage

When to use

Use it when you need a button

Class Name Description
button

The class is required when styling any non-button elements to appear as buttons.
button--secondary

The button takes on a subdued, secondary color.
button--block

Makes the button full-width
button--danger

The button is red, implying a destructive action