Skip to main content
codeFork me on GitHub favoriteMade by Daemon & djibe

Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Flat, outlined and raised buttons are the most commonly used types.

Bootstrap documentation: Buttons Most of the details have been covered here Material Design guidelines: Buttons Material Design guidelines: Applying density Material Components for the web: Buttons

Buttons

Flat buttons

Flat buttons are text-only buttons (now called Text Buttons in Material Design guidelines). They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.
Material adds .btn-flat-* buttons in order to reflect these Text buttons.

Bootstrap’s .btn-link and .card-link are styled as a primary text button.

<button class="btn btn-link" type="button">Btn-link</button>
<button class="card-link" type="button">Card link</button>
<button class="btn btn-flat" type="button">Flat</button>
<button class="btn btn-flat-primary" type="button">Primary</button>
<button class="btn btn-flat-secondary" type="button">Secondary</button>
<button class="btn btn-flat-danger" type="button">Danger</button>
<button class="btn btn-flat-info" type="button">Info</button>
<button class="btn btn-flat-success" type="button">Success</button>
<button class="btn btn-flat-warning" type="button">Warning</button>
<button class="btn btn-flat-dark" type="button">Dark</button>
<button class="btn btn-flat-light" type="button">Light</button>

Raised buttons

Raised buttons are rectangular-shaped buttons. They may be used inline. They lift and display ink reactions on press.

Default buttons, i.e. .btn, are the equivalent of Material raised buttons. For more details, read Buttons documentation.

<button class="btn" type="button">Raised</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-dark" type="button">Dark</button>
<button class="btn btn-light" type="button">Light</button>

Unelevated buttons

Unelevated buttons are easy to obtain : just add .shadow-none to your button.

<button class="btn shadow-none" type="button">Unelevated</button>
<button class="btn btn-primary shadow-none" type="button">Primary</button>
<button class="btn btn-secondary shadow-none" type="button">Secondary</button>
<button class="btn btn-danger shadow-none" type="button">Danger</button>
<button class="btn btn-info shadow-none" type="button">Info</button>
<button class="btn btn-success shadow-none" type="button">Success</button>
<button class="btn btn-warning shadow-none" type="button">Warning</button>
<button class="btn btn-dark shadow-none" type="button">Dark</button>
<button class="btn btn-light shadow-none" type="button">Light</button>

Outlined buttons

Outlined buttons have already been covered in the documentation. For more details, read Components/Buttons documentation.

<button class="btn btn-outline-primary" type="button">Primary</button>
<button class="btn btn-outline-secondary" type="button">Secondary</button>
<button class="btn btn-outline-danger" type="button">Danger</button>
<button class="btn btn-outline-info" type="button">Info</button>
<button class="btn btn-outline-success" type="button">Success</button>
<button class="btn btn-outline-warning" type="button">Warning</button>
<button class="btn btn-outline-dark" type="button">Dark</button>
<button class="btn btn-outline-light" type="button">Light</button>

Shaped buttons

For rounded buttons, add .btn-shaped class to your button. it also works for small and large buttons.

<button class="btn btn-primary btn-shaped" type="button">Normal</button>
<button class="btn btn-primary btn-sm btn-shaped" type="button">Small</button>
<button class="btn btn-primary btn-xs btn-shaped" type="button">XSmall</button>
<button class="btn btn-primary btn-lg btn-shaped" type="button">Large</button>

Density and icons

Recently, Google introduced Density guidelines, see the references at the top of page.

To reflect these changes with lowest impact on Bootstrap, here are our choices :

  • Standard .btn is equivalent to Default button size
  • .btn-sm is equivalent to Comfortable button size
  • .btn-xs is introduced to represent Compact button size
  • Bootstrap’s .btn-lg has no equivalent in Material design

Examples are presented above (cf. Shaped buttons)

At the same time, for easier icon integration within buttons (SVG, Material Icons, FontAwesome or any other icon set), btn-icon-prepend class has been created.
Just add this class to your icon/svg markup for a proper icon’s sizing and positioning.

Icon Compatibility

<button type="button" class="btn btn-primary"><svg class="btn-icon-prepend" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" viewbox="0 0 24 24" width="24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" /><path d="M0 0h24v24H0z" fill="none" /></svg>svg</button>
<button type="button" class="btn btn-primary"><i class="fa fa-trash-o btn-icon-prepend" aria-hidden="true"></i>FontAwesome 4</button>
<button type="button" class="btn btn-primary"><i class="far fa-trash-alt btn-icon-prepend" aria-hidden="true"></i>FontAwesome 5</button>
<button type="button" class="btn btn-primary"><span class="material-icons btn-icon-prepend" aria-hidden="true">delete_outline</span>Material icon</button>

Default size

<button class="btn btn-primary" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-flat-primary" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-outline-primary" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>

Default shaped

<button class="btn btn-primary btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-flat-primary btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-outline-primary btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>

Comfortable size

<button class="btn btn-primary btn-sm" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-flat-primary btn-sm" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-outline-primary btn-sm" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>

Comfortable shaped

<button class="btn btn-primary btn-sm btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-flat-primary btn-sm btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-outline-primary btn-sm btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>

Compact size

<button class="btn btn-primary btn-xs" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-flat-primary btn-xs" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-outline-primary btn-xs" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>

Compact shaped

<button class="btn btn-primary btn-xs btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-flat-primary btn-xs btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>
<button class="btn btn-outline-primary btn-xs btn-shaped" type="button"><i class="material-icons btn-icon-prepend" aria-hidden="true">add</i>button</button>

Icon buttons

Daemonite Material brings brand new .btn-icon class for buttons. Markup is simple : set a simple button with usual .btn class, add .btn-icon class and just place an icon in the button. See the examples below.

They also exist in Comfortable (.btn-sm) and Compact (.btn-xs) versions with smaller sizing.

Default

attach_file tag_faces 
<button class="btn btn-icon" type="button"><i class="material-icons">format_underline</i></button>
<a class="btn btn-icon" href="#"><i class="material-icons">attach_file</i></a>
<button class="btn btn-icon" type="button"><i class="material-icons">link</i></button>
<a class="btn btn-icon" href="#"><i class="material-icons">tag_faces</i></a>

Comfortable

attach_file tag_faces 
<button class="btn btn-icon btn-sm" type="button"><i class="material-icons">format_underline</i></button>
<a class="btn btn-icon btn-sm" href="#"><i class="material-icons">attach_file</i></a>
<button class="btn btn-icon btn-sm" type="button"><i class="material-icons">link</i></button>
<a class="btn btn-icon btn-sm" href="#"><i class="material-icons">tag_faces</i></a>

Compact

attach_file tag_faces 
<button class="btn btn-icon btn-xs" type="button"><i class="material-icons">format_underline</i></button>
<a class="btn btn-icon btn-xs" href="#"><i class="material-icons">attach_file</i></a>
<button class="btn btn-icon btn-xs" type="button"><i class="material-icons">link</i></button>
<a class="btn btn-icon btn-xs" href="#"><i class="material-icons">tag_faces</i></a>

Toggle buttons

Toggle buttons may be used to group related options, similar to Components/Button group. Use flat buttons (i.e. .btn-outlines or .btn-outline-*s) instead of raised buttons to achieve a look that is more in line with the specifications laid out in Material Design Guidelines.

<div class="btn-group btn-group-toggle shadow-none" data-toggle="buttons">
  <label class="btn btn-outline btn-sm active">
    <input type="radio" name="options1" checked>
    <i class="material-icons">format_align_left</i>
  </label>
  <label class="btn btn-outline btn-sm">
    <input type="radio" name="options1">
    <i class="material-icons">format_align_center</i>
  </label>
  <label class="btn btn-outline btn-sm">
    <input type="radio" name="options1">
    <i class="material-icons">format_align_right</i>
  </label>
  <label class="btn btn-outline btn-sm">
    <input type="radio" name="options1">
    <i class="material-icons">format_align_justify</i>
  </label>
</div>

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

color 1 color 2 color 3
color 1 color 2 color 3 
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <button class="btn btn-outline btn-sm" disabled><i class="material-icons">attach_file</i></button>
  <label class="btn btn-outline btn-sm active">
    <input checked name="options2" type="checkbox">
    <i class="material-icons">format_bold</i>
  </label>
  <label class="btn btn-outline btn-sm active">
    <input checked name="options2" type="checkbox">
    <i class="material-icons">format_italic</i>
  </label>
  <label class="btn btn-outline btn-sm active">
    <input checked name="options2" type="checkbox">
    <i class="material-icons">format_underlined</i>
  </label>
  <div class="btn-group" role="group">
    <button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop1" type="button"><i class="material-icons">format_color_text</i></button>
    <div aria-labelledby="toggleBtnDrop1" class="dropdown-menu dropdown-menu-sm">
      <a class="dropdown-item" href="#">color 1</a>
      <a class="dropdown-item" href="#">color 2</a>
      <a class="dropdown-item" href="#">color 3</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop2" type="button"><i class="material-icons">format_color_fill</i></button>
    <div aria-labelledby="toggleBtnDrop2" class="dropdown-menu dropdown-menu-sm">
      <a class="dropdown-item" href="#">color 1</a>
      <a class="dropdown-item" href="#">color 2</a>
      <a class="dropdown-item" href="#">color 3</a>
    </div>
  </div>
</div>

Vertical variation is also supported

color 1 color 2 color 3
color 1 color 2 color 3 
<div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
  <button class="btn btn-outline btn-sm" disabled><i class="material-icons">attach_file</i></button>
  <label class="btn btn-outline btn-sm active">
    <input checked name="options4" type="checkbox">
    <i class="material-icons">format_bold</i>
  </label>
  <label class="btn btn-outline btn-sm active">
    <input checked name="options4" type="checkbox">
    <i class="material-icons">format_italic</i>
  </label>
  <label class="btn btn-outline btn-sm active">
    <input checked name="options4" type="checkbox">
    <i class="material-icons">format_underlined</i>
  </label>
  <div class="btn-group" role="group">
    <button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop3" type="button"><i class="material-icons">format_color_text</i></button>
    <div aria-labelledby="toggleBtnDrop3" class="dropdown-menu dropdown-menu-sm">
      <a class="dropdown-item" href="#">color 1</a>
      <a class="dropdown-item" href="#">color 2</a>
      <a class="dropdown-item" href="#">color 3</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop4" type="button"><i class="material-icons">format_color_fill</i></button>
    <div aria-labelledby="toggleBtnDrop4" class="dropdown-menu dropdown-menu-sm">
      <a class="dropdown-item" href="#">color 1</a>
      <a class="dropdown-item" href="#">color 2</a>
      <a class="dropdown-item" href="#">color 3</a>
    </div>
  </div>
</div>

Usage

The type of button used should be suited to the context in which it appears.

Context Button type
Always available If your app requires actions to be persistent and readily available, you can use the floating action button.
Dialogs Use flat buttons in dialogs.
Inline Flat buttons or raised buttons can be used for inline buttons.

Cards

Buttons are best placed on the left side of a card to increase their visibility. However, as cards have flexible layouts, buttons may be placed in a location suited to the content and context, while maintaining consistency within the product.

Forms

Button alignment on screen: Left.

Place the affirmative button on the left, the dismissive button on the right.

Standard dialogs

Button alignment on screen: right.

Place the affirmative button on the right, the dismissive button on the left.