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.
All button labels are sentence case. They should be as short as possible while clearly explaining what will happen when the button is clicked.
There are 6 button styles:
Default, the general button style.
Primary, indicates the critical, or most important action on a form/page.
Danger, indicates a dangerous, generally destructive action, such as deleting.
Success, indicates a positive action.
Warning, indicates an action that may have some side effects, such as giving a user admin access.
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.
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.
Block level buttons
Use the btn-block class for buttons that fill the width of their container. These are useful for narrow containers and cleaning up alignment.
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.
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.
Dropdown buttons can provide a menu or popover when clicked.
Split buttons contain both a button and a dropdown. Clicking the button performs the action. Clicking the dropdown reveals other actions. Generally, the button is the primary or most common action, and items in the dropdown are secondary or less common actions.