Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.
strong button style used for primary actions on a screen such as a
Submit button on a form, or other actions that are critical in a user workflow. A
primary button should be only used once per view.
standard button style used to highlight an important action such as a
Save button on a form. (A secondary button assumes there is already a primary
light button style used for tertiary actions on a screen such as a
Cancel button on a form. (A tertiary button assumes there is already a secondary button.) Typically it performs the opposite action to the secondary button (e.g.
A button that can’t be clicked and doesn’t react to hover. A disabled button is typically greyed out to indicate to users that they cannot undertake the action associated with it. This is usually for page logic reasons.
A block-level button uses 100% of the available width of the container or parent element. A block- level button is used for visual prominence.
Links as buttons
Simple links don’t always catch a user’s attention when they’re scanning a website. So a link is sometimes styled to look like a button where you want to give it greater prominence.