Buttons


Buttons are clickable elements used to perform an action, you can apply button classes on buttons and link elements.

Note:Do not use multiple button classes on one HTML element.

Base

A base button is usually used alongside a neutral button.

View example of the base button pattern

Neutral

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

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

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

View example of the negative button pattern

Brand

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

View example of the brand button pattern

Inline

Should you wish to place a button after a line of inline text, as a CTA for example, you can do so by adding the state class is-inline to the button element.

View example of the inline button pattern

Dense

In contexts where vertical space is limited, you might want a button with reduced vertical padding. Add class .is-dense to achieve that:

View example of the dense button pattern

Icon

Should you wish to place an icon in a button. You will not want to button to become full width on small screens. Therefore, you can add the state class has-icon to the button. If the contrast between the icon chosen and the button background is not sufficient then the is-dark or is-light classes can be added to the icon where appropriate.

View example of the icon button pattern

Design

For more information view the buttons design spec which includes the specification in markdown format and a PNG image.