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 neutral button can be used to indicate a positive action that isn't necessarily the main call-to-action.
A base button can be used to discretely indicate a secondary action. It is often used alongside a neutral button.
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:
If you are working with small text and need a suitably sized button, add class
.is-small. It can be combined with
.is-dense for an even tighter look:
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.
In cases where a button needs to indicate that an action is occurring (e.g. saving data, processing a payment) while also preventing user interaction, the state class
is-processing can be added to a disabled button to maintain full opacity.
is-active utility class was renamed to the more appropriate
is-processing, as mentioned above.
In some contexts, it may be necessary to indicate to the user that a button is in a pressed state, such as when a button opens a contextual menu. This can be done by adding
To import just this component into your project, copy the snippet below and include it in your main Sass file.
@import 'patterns_buttons'; @include vf-p-buttons; // when using icons within buttons you need to include icons as well @import 'patterns_icons'; @include vf-p-icons;
If you only need a small subset of the icons consider including them individually to reduce the size of your CSS file.
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
For more information view the buttons design spec which includes the specification in markdown format and a PNG image.