Buttons
Buttons are clickable elements used to perform an action, you can apply button
classes on buttons and link elements.
Note:
Default
A default button can be used to indicate a positive action that isn't necessarily the main call-to-action.
Base
A base button can be used to discretely indicate a secondary action. It is often used alongside a default button.
Positive
A positive button can be used to indicate a positive action that is the main call-to-action.
Negative
A negative button can be used to indicate a negative action that is destructive or permanent.
Brand
You can use the brand button with the main color of your brand.
Link
In some contexts you may need a button to look visually identical to a link.
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.
Dense
In contexts where vertical space is limited, you might want a button with reduced vertical padding. Add class .is-dense
to achieve that:
Small
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:
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.
Processing
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.
When replacing a label in a button with a loading icon make sure to keep the width of the button the same to avoid content moving around. The example below has a snippet of JavaScript to demo how to achieve that or you can use the ActionButton
React component that has this functionality built-in.
Theming
The buttons use Vanilla's light theme by default. There are two ways to switch between the light and the dark themes:
- Override the default by adding a state to
p-putton
:is-dark
when the default navigation is light, oris-light
when the default has been changed to dark: - Change the default: go to
_settings_themes.scss
and set$theme-default-p-button
todark
Import
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-buttons;
// when using icons within buttons you need to include icons as well
@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.
React
You can use buttons in React by installing our react-component library and importing Button
or ActionButton
component.