Buttons

A button is the most common interface element, and in Bulma it takes a single button class. You can put the class on a <button>, a link <a> or an <input type="submit">, and they will look the same.

Colours

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<button class="button">Default</button>
<button class="button is-primary">Book a table</button>
<a class="button is-link" href="#menu">Menu</a>
<button class="button is-danger">Cancel</button>

A white button with a border, a turquoise one, a blue link button and a red one. The colour modifiers are the same as in the colours lesson: is-primary, is-link, is-info, is-success, is-warning, is-danger, plus is-white, is-light, is-dark, is-black, is-text and is-ghost (a button that looks like a link).

Variants and sizes

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<button class="button is-primary is-light">Details</button>
<button class="button is-danger is-outlined">Delete</button>
<button class="button is-success is-rounded is-medium">Pay</button>
<button class="button is-dark is-fullwidth mt-3">Go to checkout</button>

A light turquoise button, an outlined red one, a large rounded green one and a dark full-width one.

States

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<button class="button is-primary is-loading">Sending</button>
<button class="button is-primary" disabled>Fully booked</button>
<button class="button is-static">€24</button>

The first button shows a spinner instead of its text, the second is pale and cannot be clicked, the third looks like a grey label in a frame. You set is-loading from JavaScript while a request is in flight — button.classList.add('is-loading') — and remove it when the response arrives.

Button groups

Wrap several buttons in a row in buttons. The wrapper sets the gaps and wraps buttons onto a new line when space runs out:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="buttons are-small is-right">
  <button class="button">Cancel</button>
  <button class="button is-primary">Save</button>
</div>
 
<div class="buttons has-addons">
  <button class="button is-selected is-primary">Dine in</button>
  <button class="button">Terrace</button>
  <button class="button">Takeaway</button>
</div>

The first group is two small buttons at the right edge: are-small shrinks all the buttons at once, is-right pushes them right. The second is three buttons joined into one toggle; the chosen one is marked with is-selected and a colour.

The close button

For a cross there is a separate delete element: <button class="delete" aria-label="Close"></button>. It is round and grey and comes in handy in notifications, tags and modals.

Common mistake

Writing <a class="button" disabled>. The disabled attribute only works on <button> and form fields: the link turns pale but can still be followed. For an unavailable action use a <button>, or remove the href from the link.