Buttons

You can apply button classes on buttons and link elements.

Note: Avoid using more than two button styles together.

Base button

A base button is usually used alongside a neutral button.

View example of the base button pattern

Neutral button

A neutral button can be used to indicate a positive action that isn't necessarily the main call-to-action.

View example of the neutral button pattern

Positive button

A positive button can be used to indicate a positive action that is the main call-to-action.

View example of the positive button pattern

Negative button

A negative button can be used to indicate a negative action that is destructive or permanent.

View example of the negative button pattern

Brand button

You can use the brand button with the main color of your brand.

View example of the brand button pattern

Inline button

Should you wish to place a button after a line of inline text, as a CTA for example, you can do so by wrapping the text in a <span> and placing the button immediately after it.

View example of the inline button pattern