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.
A base button is usually used alongside a neutral button.
A neutral button can be used to indicate a positive action that isn’t necessarily the main call-to-action.
A positive button can be used to indicate a positive action that is the main call-to-action.
A negative button can be used to indicate a negative action that is destructive or permanent.
You can use the brand button with the main color of your brand.
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.
In contexts where vertical space is limited, you might want a button with reduced vertical padding. Add class
.is-dense to achieve that:
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-light classes can be added to the icon where appropriate.
For more information view the buttons design spec which includes the specification in markdown format and a PNG image.