Overview

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Button Types

Buttons have both a style class and a color class which, when combined, give a wide area of uses and connotations.

The following are the three main types of buttons available:

  • Solid: .btn-{theme-color}
  • Outline: .btn-outline-{theme-color}
  • Text: .btn-text-{theme-color}

Solid Buttons

Solid buttons should only be used with the Primary, Secondary, and Tertiary theme colors.

class="btn-{theme-color}"

<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>
<button class="btn btn-tertiary">Button</button>

Outline Buttons

Outline buttons should only be used with the Primary, and Dark theme colors.

class="btn-outline-{theme-color}"

<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-outline-dark">Button</button>

Text Buttons

Text buttons should only be used with the Primary theme color.

class="btn-text-{theme-color}"

Icon Buttons

Modus has built in support for both icon only buttons and buttons with both icons and text.

Text and Icons

Icons can be used within buttons by giving the icon a class of .modus-icon in addition to a class of either .left-icon or .right-icon, depending on the desired position.

Icon Only Buttons

When using Icon Only Buttons, DO NOT add any additional text inside the button. Give the button a class of .btn-icon-only and give the icon a class of .modus-icon.

Note: Text icon-only buttons can be used with the Primary or Dark theme color.

<button class="btn btn-icon-only btn-text-dark">
  <i class="modus-icon material-icons">settings</i>
</button>
  <button class="btn btn-icon-only btn-text-secondary">
<i class="modus-icon material-icons">settings</i>
</button>

Button Sizes

Buttons default to “medium” size but there are also large and small options available.

Small Buttons

class="btn btn-sm"

<button class="btn btn-sm btn-primary">Button</button>
<button class="btn btn-sm btn-secondary">Button</button>
<button class="btn btn-sm btn-tertiary">Button</button>
<button class="btn btn-sm btn-outline-primary">Button</button>
<button class="btn btn-sm btn-outline-dark">Button</button>
<button class="btn btn-sm btn-text-primary">Button</button>
<button class="btn btn-sm btn-primary">
  <i class="modus-icon material-icons left-icon">settings</i>Button
</button>
<button class="btn btn-sm btn-icon-only btn-text-dark">
  <i class="modus-icon material-icons">settings</i>
</button>
<button class="btn btn-sm btn-icon-only btn-text-secondary">
  <i class="modus-icon material-icons">settings</i>
</button>

Large Buttons

class="btn btn-lg"

<button class="btn btn-lg btn-primary">Button</button>
<button class="btn btn-lg btn-secondary">Button</button>
<button class="btn btn-lg btn-tertiary">Button</button>
<button class="btn btn-lg btn-outline-primary">Button</button>
<button class="btn btn-lg btn-outline-dark">Button</button>
<button class="btn btn-lg btn-text-primary">Button</button>
<button class="btn btn-lg btn-primary">
  <i class="modus-icon material-icons left-icon">settings</i>Button
</button>
<button class="btn btn-lg btn-icon-only btn-text-dark">
  <i class="modus-icon material-icons">settings</i>
</button>
<button class="btn btn-lg btn-icon-only btn-text-secondary">
  <i class="modus-icon material-icons">settings</i>
</button>

Full-width (Block) Buttons

class="btn-block"

<button class="btn btn-block btn-primary">Button</button>
<button class="btn btn-block btn-outline-primary">Button</button>
<button class="btn btn-block btn-text-primary">Button</button>

Special Use Cases

Danger Button

A danger button should be used for permanent, destructive actions like delete.

class="btn btn-danger"

<button class="btn btn-danger">Delete</button>
<button class="btn btn-danger btn-icon-only ml-1 mr-3">
  <i class="modus-icons">trash</i>
</button>
<button class="btn btn-text-danger">Delete</button>
<button class="btn btn-text-danger btn-icon-only ml-1 mr-3">
  <i class="modus-icons">trash</i>
</button>