Buttons

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

Default

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

                
<v-button>Default button</v-button> 
<v-button disabled>Default button disabled</v-button>
                
              

Default button Default button disabled

Base

A base button can be used to discretely indicate a secondary action. It is often used alongside a default button.

                
<v-button appearance="base">Base button</v-button> 
<v-button appearance="base" disabled>Base button disabled</v-button>
                
              

Base Base disabled

Positive

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

                
<v-button appearance="positive">Positive button</v-button> 
<v-button appearance="positive" disabled>Positive button disabled</v-button>
                
              

Positive button Positive button disabled

Negative

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

                
<v-button appearance="negative">Negative button</v-button> 
<v-button appearance="negative" disabled>Negative button disabled</v-button>
                
              

Negative button Negative button disabled

Brand

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

                
<v-button appearance="brand">Brand button</v-button> 
<v-button appearance="brand" disabled>Brand button disabled</v-button>
                
              

Brand button Brand button disabled

Link

In some contexts you may need a link to look visually identical to a button.

                
<v-button href="https://canonical.com/">Link button</v-button>
                
              

Link button

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.

                
<span>Everything you need to get started with Vanilla.</span>
<v-button inline>Inline button</v-button>
                
              

Dense

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

                
<span>Everything you need to get started with Vanilla.</span>
<v-button dense>Dense button</v-button>
                
              

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:

                
<p><small>This is small text <v-button small inline>This is a small button</v-button> <v-button small dense>This is a small, dense button</v-button></small></p>
                
              

This is small text This is a small button This is a small, dense button

Icon

You can add icons to the button too

The color of the icon will be determined automatically based on the appearance of the button.

                
<v-button prefix-icon="menu">Icon button</v-button>
<v-button appearance="positive" prefix-icon="plus">Positive icon button</v-button>
<v-button appearance="negative" prefix-icon="delete">Negative icon button</v-button>
<v-button appearance="base" prefix-icon="search">Base icon button</v-button>
<v-button appearance="brand" prefix-icon="share">Brand icon button</v-button>
<v-button suffix-icon="chevron-down">Suffix icon button</v-button>
                
              

Icon button Positive icon button Negative icon button

Base icon button Brand icon button Suffix icon button

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 prop is-processing can be added.

                
<v-button appearance="positive" prefix-icon="plus">Action button</v-button>
<v-button appearance="positive" prefix-icon="plus" is-processing>Action button</v-button>
                
              

Action button Action button

Functionality

You don't have anything to worry about! The buttons will work out of the box 🎉