Buttons

Use buttons to prompt a call-to-action from the user.

Button Basics

Usage

  • Button text should be short as possible and written in sentence case.
  • Icons should appear to the left of button text. Labels should appear to the right.
  • Use the .noicon class to disable automatic icons appearing to the right.
  • Use the .no-wrap class to disable wrapping. Check your work on mobile though.

Types  Code

Button Types
Type Description
Red Red (or scarlet) buttons should only be used once per page and should indicate the most important action on a page. Not every page needs a red button.
Primary The primary button is the most commonly used button type and can be used multiple times per page.
Default The default button is useful when paired next to a primary button to indicate lesser importance.
Gray Dark gray buttons are often used for a section of buttons (i.e. commonly used tools/resources).
Ghost Ghost buttons are commonly used when overlayed on anther image or object (i.e. hero text).
Link These buttons can be used when you do not want to overwhelm the page with button colors.
Success The success button type can be used to convey a positive action (i.e. create or save).
Info The info button type can be used to provide more information (i.e. More about…).
Warning The danger button type can be used to convey a potentially negative action (i.e. cancel).
Danger The danger button type can be used to convey a negative action (i.e. delete).

Sizes  Code

Block Buttons

Buttons can be expanded to the full width of the parent container by using block buttons.

Default Block Buttons  Code

Responsive Block Buttons

Buttons by default display inline. Use .btn-block-* classes to display full-width, block buttons at particular viewport sizes.

Use the .btn-inline-* classes to return the button to it's default inline display. Always use the .btn-block class along with .btn-inline-* classes.

Responsive Block Button Classes
Class Name Extra Small Small Medium Large
.btn-block, .btn-block-xs Block Block Block Block
.btn-block-sm Inline Block Block Block
.btn-block-md Inline Inline Block Block
.btn-block-lg Inline Inline Inline Block
.btn-block.btn-inline-xs Inline Inline Inline Inline
.btn-block.btn-inline-sm Block Inline Inline Inline
.btn-block.btn-inline-md Block Block Inline Inline
.btn-block.btn-inline-lg Block Block Block Inline

Button Groups

Buttons groups give access to frequently performed, related actions. Buttons appear attached to one another as opposed to a group of unattached buttons.

Usage

  • If the purpose is for a general group of buttons, include the role="group" attribute to the .btn-group container. If the button group's purpose is for a toolbar, use the role="toolbar" attribute instead.
  • Be aware of how button groups look on mobile devices because the group could be split into two lines of buttons, breaking the group.

Default Button Groups  Code

These horizontal button groups commonly appear near the top of the page.

Justified Button Groups  Code

A justified button group expands to the width of the parent container

List of Buttons: An Alternative to Horizontal Button Groups  Code

If you wish to have a group of unattached buttons, simply use an unstyled, inline list with a button in each line item. This will ensure that buttons wrap without overlapping one another.

Vertical Button Groups  Code

Vertical button groups commonly appear on a sidebar or within a card.