Buttons

Buttons are used as triggers for actions. Depending on the use case, buttons contain a label and/or an icon. There are a variety of styles, sizes, and variations that can be used for different situations.

Version 1.0

Basic Example of Module

Usage & Code Tips

@include title of mixin

@include title of mixin

@include title of mixin

Button styles

Version 1.0

There are 6 button styles:

  • Default, .btn-default the general button style.
  • Primary, .btn-primaryindicates the critical, or most important action on a form/page.
  • Information, .btn-info indicates information section.
  • Success, .btn-success indicates a positive action.
  • Warning,.btn-warning indicates an action that may have some side effects, such as giving a user admin access.
  • Danger,.btn-danger indicates a dangerous, generally destructive action, such as deleting.
  • Link, used for non-critical actions. Useful for keeping the interface simple.

All buttons are prefixed with the btn class. The btn class can be applied to any element. Try to use <button> elements when an action won’t change the URL/route, and <a> elements when the action will change the URL/route.

Button sizes

Version 1.0

There are 4 different button sizes:

  • Large, use the .btn-lg class.
  • Normal, no extra classes necessary.
  • Small, use the .btn-sm class.
  • Extra small, use the .btn-xs class.

Button groups

Version 1.0

Related buttons can be grouped together to show associations and improve clarity. Button groups can be sized using the btn-group-lg, btn-group-sm, and btn-group-xs classes.

Button toggles

Version 1.0

Similar to a checkbox, toggle buttons can be toggled between active or not active.

Add the active class and the aria-pressed="true" attribute to a button.

Button dropdowns

Dropdown buttons can provide a menu or popover when clicked.

Version 1.0