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>