Buttons

Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.

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 type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<button type="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 type="button" class="btn btn-outline-primary">Button</button>
<button type="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.

<button type="button" class="btn btn-primary">
  <i class="modus-icons notranslate left-icon" aria-hidden="true">add</i>Add
</button>
<button type="button" class="btn btn-secondary">
  <i class="modus-icons notranslate left-icon" aria-hidden="true">remove</i>Remove
</button>
<button type="button" class="btn btn-outline-primary">
  <i class="modus-icons notranslate left-icon" aria-hidden="true">add</i>Add
</button>
<button type="button" class="btn btn-outline-dark">
  <i class="modus-icons notranslate left-icon" aria-hidden="true">remove</i>Remove
</button>

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 type="button" class="btn btn-icon-only btn-text-dark" aria-label="Settings">
  <i class="modus-icons notranslate" aria-hidden="true">settings</i>
</button>
<button type="button" class="btn btn-icon-only btn-text-secondary" aria-label="Settings">
  <i class="modus-icons notranslate" aria-hidden="true">settings</i>
</button>
<button type="button" class="btn btn-icon-only btn-outline-primary" aria-label="Settings">
  <i class="modus-icons notranslate" aria-hidden="true">settings</i>
</button>
<button type="button" class="btn btn-icon-only btn-outline-secondary" aria-label="Settings">
  <i class="modus-icons notranslate" aria-hidden="true">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 type="button" class="btn btn-sm btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-secondary">Button</button>
<button type="button" class="btn btn-sm btn-tertiary">Button</button>
<button type="button" class="btn btn-sm btn-outline-primary">Button</button>
<button type="button" class="btn btn-sm btn-outline-dark">Button</button>
<button type="button" class="btn btn-sm btn-text-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">
  <i class="modus-icons left-icon" aria-hidden="true">settings</i>Button
</button>
<button type="button" class="btn btn-sm btn-icon-only btn-text-dark">
  <i class="modus-icons notranslate" aria-hidden="true">settings</i>
</button>
<button type="button" class="btn btn-sm btn-icon-only btn-text-secondary">
  <i class="modus-icons notranslate" aria-hidden="true">settings</i>
</button>

Large Buttons

class="btn btn-lg"

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

Full-width (Block) Buttons

class="btn-block"

<button type="button" class="btn btn-block btn-primary">Button</button>
<button type="button" class="btn btn-block btn-outline-primary">Button</button>
<button type="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 type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-danger btn-icon-only ml-1 mr-3">
  <i class="modus-icons notranslate" aria-hidden="true">delete</i>
</button>
<button type="button" class="btn btn-text-danger">Delete</button>
<button type="button" class="btn btn-text-danger btn-icon-only ml-1 mr-3">
  <i class="modus-icons notranslate" aria-hidden="true">delete</i>
</button>