Buttons

Use custom button styles for actions in dialogs and forms with examples for multiple states and sizes.

Styles

The FMS Design System provides eight (8) button styles. To guide your implementation, a definition of each style, a reference table of classes, and code samples are provided.

Primary
Danger
Link
Secondary
Tertiary
Full-Width / block
Split buttons

Adding icons

You can add an optional icon to your buttons using the icons from Font Awesome. For more information on how to include and style a Font Awesome icon, see the Font Awesome “Basic Use” documentation.

Disabling buttons

You can disable buttons using the disabled and aria-disabled="true" attributes.

For more information on buttons, see Bootstrap Buttons documentation.

Primary

Use primary buttons for the default or highest priority action on a page or view. Only use primary buttons once on the page or view in which it appears.

Classes

Title	Class
Primary button	`.btn` `.btn-primary`
Primary round button	`.btn` `.btn-primary` `.btn-round`

Optional tasks: Add an icon | Disable a button

Code sample

<button type="button" aria-label="Icon Text Button" title="Icon Text Button" class="btn btn-primary"><i class="fa fas fa-user pr-2"></i>Icon Text</button>
<button type="button" aria-label="Text Icon Button" title="Text Icon Button" class="btn btn-primary">Text Icon<i class="fa fas fa-user pl-2"></i></button>
<button type="button" aria-label="Text Button" title="Text Button" class="btn btn-primary">Text</button>
<button type="button" aria-label="Icon Button" title="Icon Button" class="btn btn-primary"><i class="fa fas fa-user"></i></button>
<button type="button" aria-label="Round Button" title="Round Button" class="btn btn-primary btn-round"><i class="fa fas fa-angle-right"></i></button>
<button type="button" aria-label="Disabled Button" title="Disabled Button" class="btn btn-primary" disabled aria-disabled="true">Disabled</button>
<button type="button" aria-label="Icon Disabled Button" title="Icon Disabled Button" class="btn btn-primary" disabled aria-disabled="true"><i class="fa fas fa-user pr-2"></i>Disabled</button>

Danger

Use danger buttons when an action could result in the destruction of data.

Classes

Title	Class
Danger button	`.btn` `.btn-danger`
Danger round button	`.btn` `.btn-danger` `.btn-round`

Optional tasks: Add an icon | Disable a button

Code sample

<button type="button" aria-label="Icon Text Button" title="Icon Text Button" class="btn btn-danger"><i class="fa fas fa-times-circle pr-2"></i>Icon Text</button>
<button type="button" aria-label="Text Icon Button" title="Text Icon Button" class="btn btn-danger">Text Icon<i class="fa fas fa-times-circle pl-2"></i></button>
<button type="button" aria-label="Text Button" title="Text Button" class="btn btn-danger">Text</button>
<button type="button" aria-label="Icon Button" title="Icon Button" class="btn btn-danger"><i class="fa fas fa-times-circle"></i></button>
<button type="button" aria-label="Round Button" title="Round Button" class="btn btn-danger btn-round"><i class="fa fas fa-angle-right"></i></button>
<button type="button" aria-label="Disabled Button" title="Disabled Button" class="btn btn-danger" disabled aria-disabled="true">Disabled</button>
<button type="button" aria-label="Icon Disabled Button" title="Icon Disabled Button" class="btn btn-danger" disabled aria-disabled="true"><i class="fa fas fa-times-circle pr-2"></i>Disabled</button>

Link

Use link buttons for lower-priority actions.

Classes

Title	Class
Link button	`.btn` `.btn-link`

Optional tasks: Add an icon | Disable a button

Code sample

<button type="button" aria-label="Icon Text Button" title="Icon Text Button" class="btn btn-link"><i class="fa fas fa-user pr-2"></i>Icon Text</button>
<button type="button" aria-label="Text Icon Button" title="Text Icon Button" class="btn btn-link">Text Icon<i class="fa fas fa-user pl-2"></i></button>
<button type="button" aria-label="Text Button" title="Text Button" class="btn btn-link">Text</button>
<button type="button" aria-label="Disabled Button" title="Disabled Button" class="btn btn-link" disabled aria-disabled="true">Disabled</button>
<button type="button" aria-label="Icon Disabled Button" title="Icon Disabled Button" class="btn btn-link" disabled aria-disabled="true"><i class="fa fas fa-user pr-2"></i>Disabled</button>

Secondary

Use secondary buttons with primary buttons as the negative or opposite action of the primary button. For example, assigning “Save” as a primary button and “Cancel” as a secondary button.

Classes

Title	Class
Secondary button	`.btn` `.btn-secondary`
Secondary round button	`.btn` `.btn-secondary` `.btn-round`

Optional tasks: Add an icon | Disable a button

Code sample

<button type="button" aria-label="Icon Text Button" title="Icon Text Button" class="btn btn-secondary"><i class="fa fas fa-user pr-2"></i>Icon Text</button>
<button type="button" aria-label="Text Icon Button" title="Text Icon Button" class="btn btn-secondary">Text Icon<i class="fa fas fa-user pl-2"></i></button>
<button type="button" aria-label="Text Button" title="Text Button" class="btn btn-secondary">Text</button>
<button type="button" aria-label="Icon Button" title="Icon Button" class="btn btn-secondary"><i class="fa fas fa-user"></i></button>
<button type="button" aria-label="Round Button" title="Round Button" class="btn btn-secondary btn-round"><i class="fa fas fa-angle-right"></i></button>
<button type="button" aria-label="Disabled Button" title="Disabled Button" class="btn btn-secondary" disabled aria-disabled="true">Disabled</button>
<button type="button" aria-label="Icon Disabled Button" title="Icon Disabled Button" class="btn btn-secondary" disabled aria-disabled="true"><i class="fa fas fa-user pr-2"></i>Disabled</button>

Tertiary

When referring to small, independent actions, use the tertiary button style. You can also use tertiary buttons when there are multiple calls-to-action within a page or view, or an isolated action next to a form field.

Classes

Title	Class
Tertiary button	`.btn` `.btn-tertiary`
Tertiary round button	`.btn` `.btn-tertiary` `.btn-round`

Optional tasks: Add an icon | Disable a button

Code sample

<button type="button" aria-label="Icon Text Button" title="Icon Text Button" class="btn btn-tertiary"><i class="fa fas fa-user pr-2"></i>Icon Text</button>
<button type="button" aria-label="Text Icon Button" title="Text Icon Button" class="btn btn-tertiary">Text Icon<i class="fa fas fa-user pl-2"></i></button>
<button type="button" aria-label="Text Button" title="Text Button" class="btn btn-tertiary">Text</button>
<button type="button" aria-label="Icon Button" title="Icon Button" class="btn btn-tertiary"><i class="fa fas fa-user"></i></button>
<button type="button" aria-label="Round Button" title="Round Button" class="btn btn-tertiary btn-round"><i class="fa fas fa-angle-right"></i></button>
<button type="button" aria-label="Disabled Button" title="Disabled Button" class="btn btn-tertiary" disabled aria-disabled="true">Disabled</button>
<button type="button" aria-label="Icon Disabled Button" title="Icon Disabled Button" class="btn btn-tertiary" disabled aria-disabled="true"><i class="fa fas fa-user pr-2"></i>Disabled</button>

Full-Width / block

Block level buttons are buttons that span the full width of a column of a block (for example, a table column, content area, etc.). These are useful in tables and grid columns. The text and icon stay centered regardless of button width.

You can use any of the available classes (primary, secondary, tertiary, warning, danger, or link) for the full-width/block buttons.

Classes

Title	Class
Full-width/block button	`.btn` `.btn-primary` `.btn-block`

Optional tasks: Add an icon | Disable a button

Code sample

<button type="button" title="Icon Text Button" class="btn btn-primary btn-block"><i class="fa fas fa-user pr-2"></i>Icon Text</button>

Split buttons

A split button contains a set of actions that will navigate the user away from the page or view they’re currently on.

Primary split-button classes

Title	Class	Description
Button group	`.btn-group`	Required to group other button classes together
Primary button	`.btn .btn-primary`	Refers to the button and dropdown menu
Primary dropdown toggle	`.btn` `.btn-primary` `.dropdown-toggle` `.dropdown-toggle-split`	A dropdown button with primary attributes
General dropdown menu	`.dropdown-menu`	Applies a general class to the dropdown menu
Primary dropdown items	`.menu-primary`	Refers to primary split button’s menu items
dropdown item	`.dropdown-item`	Refers to the dropdown items
dropdown divider	`.dropdown-divider`	Adds a divider between two menu dropdown items

Optional tasks: Add an icon | Disable a button

Code sample

<div class="btn-group">
    <button type="button" class="btn btn-primary" title="Icon Text" aria-label="Icon Text"><i class="fa fas fa-user pr-2"></i>Icon Text</button>
    <button type="button" id="primaryToggleIconTextDropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-split" title="Toggle Icon Text Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Icon Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-primary" aria-labelledby="primaryToggleIconTextDropdown">
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Default action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Another action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary" title="Text Icon" aria-label="Text Icon">Text Icon <i class="fa fas fa-user pl-2"></i></button>
    <button type="button" id="primaryToggleTextIconDropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-split" title="Toggle Text Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Text Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-primary" aria-labelledby="primaryToggleTextIconDropdown">
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Default action </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Another action </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Something else here </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Separated link </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary" title="Text" aria-label="Text">Text</button>
    <button type="button" id="primaryToggleTextDropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-split" title="Toggle Text Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-primary" aria-labelledby="primaryToggleTextDropdown">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary" title="Icon" aria-label="Icon"><i class="fa fas fa-user"></i></button>
    <button type="button" id="primaryToggleIconDropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-split" title="Toggle Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-primary" aria-labelledby="primaryToggleIconDropdown">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary" title="Text Icon" aria-label="Text Icon" disabled aria-disabled="true">Text Icon <i class="fa fas fa-user pl-2"></i></button>
    <button type="button" id="primaryToggleTextIconDropdownDisabled" class="btn btn-primary dropdown-toggle dropdown-toggle-split" title="Toggle Text Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled aria-disabled="true" data-reference="parent">
      <span class="sr-only">Toggle Text Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-primary" aria-labelledby="primaryToggleTextIconDropdownDisabled">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary" title="Icon" aria-label="Icon" disabled aria-disabled="true"><i class="fa fas fa-user"></i></button>
    <button type="button" id="primaryToggleIconDropdownDisabled" class="btn btn-primary dropdown-toggle dropdown-toggle-split" title="Toggle Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled aria-disabled="true" data-reference="parent">
      <span class="sr-only">Toggle Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-primary" aria-labelledby="primaryToggleIconDropdownDisabled">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>

Secondary split-button classes

Title	Class	Description
Button group	`.btn-group`	Required to group other button classes together
Secondary button	`.btn` `.btn-secondary`	Refers to the button and dropdown menu
Secondary dropdown toggle	`.btn`. `.btn-secondary` `.dropdown-toggle` `.dropdown-toggle-split`	A dropdown button with secondary attributes
General dropdown menu	`.dropdown-menu`	Applies a general class to the dropdown menu
Secondary dropdown items	`.menu-secondary`	Refers to secondary split button’s menu items
dropdown item	`.dropdown-item`	Refers to the dropdown items
dropdown divider	`.dropdown-divider`	Adds a divider between two menu dropdown items items

Optional tasks: Add an icon | Disable a button

Code sample

<div class="btn-group">
    <button type="button" class="btn btn-secondary" title="Icon Text" aria-label="Icon Text"><i class="fa fas fa-user pr-2"></i>Icon Text</button>
    <button type="button" id="secondaryToggleIconTextDropdown" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" title="Toggle Icon Text Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Icon Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleIconTextDropdown">
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Default action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Another action</a>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="fa fas fa-user pr-2"></i> Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary" title="Text Icon" aria-label="Text Icon">Text Icon <i class="fa fas fa-user pl-2"></i></button>
    <button type="button" id="secondaryToggleTextIconDropdown" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" title="Toggle Text Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Text Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleTextIconDropdown">
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Default action </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Another action </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Something else here </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><div class="d-flex"><div class="mr-auto">Separated link </div><div><i class="fa fas fa-user pl-2"></i></div></div></a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary" title="Text" aria-label="Text">Text</button>
    <button type="button" id="secondaryToggleTextDropdown" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" title="Toggle Text Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Text Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleTextDropdown">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary" title="Icon" aria-label="Icon"><i class="fa fas fa-user"></i></button>
    <button type="button" id="secondaryToggleIconDropdown" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" title="Toggle Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleIconDropdown">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary" title="Text Icon" aria-label="Text Icon" disabled aria-disabled="true">Text Icon <i class="fa fas fa-user pl-2"></i></button>
    <button type="button" id="secondaryToggleTextIconDropdownDisabled" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" title="Toggle Text Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled aria-disabled="true" data-reference="parent">
      <span class="sr-only">Toggle Text Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleTextIconDropdownDisabled">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary" title="Icon" aria-label="Icon" disabled aria-disabled="true"><i class="fa fas fa-user"></i></button>
    <button type="button" id="secondaryToggleIconDropdownDisabled" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" title="Toggle Icon Dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled aria-disabled="true" data-reference="parent">
      <span class="sr-only">Toggle Icon Dropdown</span>
    </button>
    <div class="dropdown-menu menu-secondary" aria-labelledby="secondaryToggleIconDropdownDisabled">
      <a class="dropdown-item" href="#">Default action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>