Use any of the available button styles such as primary to quickly created styled buttons. Some of the outline buttons, btn-outline-light in particular, should be used on a darker background for sufficient color contrast.
Our default button size is large, use the class btn-sm if you want to use the small sized button.
Use a mix of display and grid utilities to create full-width stacks or block buttons.
Use the disabled class to created disabled buttons.
Icon (situational): Serves to give more context to the button. E.g a plus icon to indicate addition or creation.
Text: Serves to tell users what the button is being used for. Length of the text is expandable.
Container: Takes on the length of the text within the button while maintaing spacing of the overall button.
Within the button
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing within the button. Base height
Large - 48px
Medium - 40px
Small - 32px
Buttons should be used:
For important actions that you want your users to take. For example submission of a form or editing a page.
Buttons should not be used:
When linking pages in a site.
For less important actions. For those types of actions, consider using text links.
Use primary buttons for actions that go to the next step or for submission
This makes it clear to the user that a action will happen when they click on the button.
Use outline or secondary buttons for secondary actions
This will help differentiate it from primary action buttons.
Ensure buttons look clickable
Do ensure that hover and active states are clear to the user from its static state.
Avoid using too many buttons
Buttons should be reserved mainly primary actions the users is supposed to take within a page.
E.g on a form you may use 3 buttons, 1 primary and 2 secondary but text links for actions within the page.
Keep text within button short
Text should be as short as possible and with action text to allow the user to easily understand what will happen when the button is clicked.
E.g Submit, Next or Download.