Button

The classic button with additional sizes

Sizes

The button comes in 6 different sizes:

  • tiny
  • small
  • normal
  • medium
  • large
  • jumbo

While the default size is the normal one, the is-normal modifier exists in case you need to reset the button to its normal size.

Example

HTML 

<button class="button is-tiny">Tiny</button>
                    <button class="button is-small">Small</button>
                    <button class="button">Default</button>
                    <button class="button is-normal">Normal</button>
                    <button class="button is-medium">Medium</button>
                    <button class="button is-large">Large</button>
                    <button class="button is-jumbo">Jumbo</button>

You can change the size of multiple buttons at once by wrapping them in a buttons parent, and applying one of 5 modifiers:

  • buttons are-tiny
  • buttons are-small
  • buttons are-medium
  • buttons are-large
  • buttons are-jumbo

Example

HTML 

<div class="buttons are-medium">
                    <button class="button">All</button>
                    <button class="button">Medium</button>
                    <button class="button">Size</button>
                    </div>