This website requires JavaScript to deliver the best possible experience.

Buttons

    <div class="buttons">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>
    .buttons
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No
      <div class="buttons is-tiny">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-small">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-normal">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-large">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-massive">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>
      .buttons.is-tiny
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-small
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-normal
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-large
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-massive
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No
        <div class="buttons">
  <button class="button is-success">Yes</button>
  <button class="button">Maybe</button>
  <button class="button is-secondary">Perhaps</button>
  <button class="button is-primary">No</button>
</div>

<div class="buttons is-primary">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-secondary">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-success">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-warning">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-danger">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-black">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-white">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>
        .buttons
  button.button.is-success Yes
  button.button Maybe
  button.button.is-secondary Perhaps
  button.button.is-primary No

.buttons.is-primary
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-secondary
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-success
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-warning
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-danger
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-black
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-white
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No
          <div class="buttons">
  <button class="button is-success">Yes</button>
  <button class="button">Maybe</button>
  <button class="button is-secondary">Perhaps</button>
  <button class="button is-primary">No</button>
</div>

<div class="buttons is-primary">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-secondary">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-success">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-warning">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-danger">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-black">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-white">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>
          .buttons
  button.button.is-success Yes
  button.button Maybe
  button.button.is-secondary Perhaps
  button.button.is-primary No

.buttons.is-primary
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-secondary
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-success
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-warning
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-danger
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-black
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-white
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No
            <div class="buttons is-inverse">
  <button class="button is-success">Yes</button>
  <button class="button">Maybe</button>
  <button class="button is-secondary">Perhaps</button>
  <button class="button is-primary">No</button>
</div>

<div class="buttons is-primary is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-secondary is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-success is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-warning is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-danger is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-black is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>

<div class="buttons is-white is-inverse">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">Perhaps</button>
  <button class="button">No</button>
</div>
            .buttons.is-inverse
  button.button.is-success Yes
  button.button Maybe
  button.button.is-secondary Perhaps
  button.button.is-primary No

.buttons.is-primary.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-secondary.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-success.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-warning.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-danger.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-black.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No

.buttons.is-white.is-inverse
  button.button Yes
  button.button Maybe
  button.button Perhaps
  button.button No
              <div class="buttons">
  <button class="button">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z"></path>
    </svg>
  </button>
  <button class="button">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M3,3H21V5H3V3M7,7H17V9H7V7M3,11H21V13H3V11M7,15H17V17H7V15M3,19H21V21H3V19Z"></path>
    </svg>
  </button>
  <button class="button">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M3,3H21V5H3V3M9,7H21V9H9V7M3,11H21V13H3V11M9,15H21V17H9V15M3,19H21V21H3V19Z"></path>
    </svg>
  </button>
  <button class="button">
    <svg viewbox="0 0 24 24" class="icon">
      <path d="M3,3H21V5H3V3M3,7H21V9H3V7M3,11H21V13H3V11M3,15H21V17H3V15M3,19H21V21H3V19Z"></path>
    </svg>
  </button>
</div>
              .buttons
  button.button
    svg(class="icon" viewbox='0 0 24 24')
      path( d='M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z')
  button.button
    svg(class="icon" viewbox='0 0 24 24')
      path( d='M3,3H21V5H3V3M7,7H17V9H7V7M3,11H21V13H3V11M7,15H17V17H7V15M3,19H21V21H3V19Z')
  button.button
    svg(class="icon" viewbox='0 0 24 24')
      path( d='M3,3H21V5H3V3M9,7H21V9H9V7M3,11H21V13H3V11M9,15H21V17H9V15M3,19H21V21H3V19Z')
  button.button
    svg(class="icon" viewbox='0 0 24 24')
      path( d='M3,3H21V5H3V3M3,7H21V9H3V7M3,11H21V13H3V11M3,15H21V17H3V15M3,19H21V21H3V19Z')
              ModifierDescriptionClass
              Colorindicates the element state

              .is-black

              .is-white

              .is-primary

              .is-secondary

              .is-info

              .is-success

              .is-warning

              .is-danger

              Sizechanges the element size based on font-size

              .is-tiny

              .is-small

              .is-normal

              .is-large

              .is-massive

              Blockthe button takes all the container width.is-block
              Inversereverses background and text color.is-inverse
              Roundedadd rounded corners to a button.is-rounded
              Disabledindicates that a button is disabled, equivalent to `button[disabled]`.is-disabled