component

Button

You can apply basic styles by using the class button.
The button class can be used on:

<a> anchor links
<button> form buttons
<input type="submit"> submit inputs
<input type="reset"> reset inputs

  <a class="button">Anchor</a>
  <button class="button">Button</button>
  <input class="button" type="submit" value="Submit input"/>
  <input class="button" type="reset" value="Reset input"/>

Anchor

Sizes

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

Colors

  <button class="button">Default</button>
  <button class="button is-primary">Primary</button>
  <button class="button is-secondary">Secondary</button>
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>

Styles

Default

  <button class="button">Default</button>
  <button class="button is-primary">Active</button>
  <button class="button is-secondary">Light</button>
  <button class="button is-info">Outlined</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>

Active

  <button class="button is-active">Default</button>
  <button class="button is-active is-primary">Active</button>
  <button class="button is-active is-secondary">Light</button>
  <button class="button is-active is-info">Outlined</button>
  <button class="button is-active is-success">Success</button>
  <button class="button is-active is-warning">Warning</button>
  <button class="button is-active is-danger">Danger</button>

Light

  <button class="button is-light">Default</button>
  <button class="button is-light is-primary">Primary</button>
  <button class="button is-light is-secondary">Secondary</button>
  <button class="button is-light is-info">Info</button>
  <button class="button is-light is-success">Success</button>
  <button class="button is-light is-warning">Warning</button>
  <button class="button is-light is-danger">Danger</button>

Outlined

  <button class="button is-outlined">Default</button>
  <button class="button is-outlined is-primary">Primary</button>
  <button class="button is-outlined is-secondary">Secondary</button>
  <button class="button is-outlined is-info">Info</button>
  <button class="button is-outlined is-success">Success</button>
  <button class="button is-outlined is-warning">Warning</button>
  <button class="button is-outlined is-danger">Danger</button>

Text

  <button class="button is-text">Default</button>
  <button class="button is-text is-primary">Primary</button>
  <button class="button is-text is-secondary">Secondary</button>
  <button class="button is-text is-info">Info</button>
  <button class="button is-text is-success">Success</button>
  <button class="button is-text is-warning">Warning</button>
  <button class="button is-text is-danger">Danger</button>

Icons

  <div class="buttons">
    <button class="button">
      <i class="is-left-icon fa-regular fa-circle"></i>
      Default
    </button>

    <button class="button">
      Default
      <i class="is-right-icon fa-regular fa-circle"></i>
    </button>

    <button class="button is-active">
      <i class="is-left-icon fa-regular fa-circle"></i>
      Active
    </button>

    <button class="button is-active">
      Active
      <i class="is-right-icon fa-regular fa-circle"></i>
    </button>

    <button class="button is-light">
      <i class="is-left-icon fa-regular fa-circle"></i>
      Light
    </button>

    <button class="button is-light">
      Light
      <i class="is-right-icon fa-regular fa-circle"></i>
    </button>

    <button class="button is-outlined">
      <i class="is-left-icon fa-regular fa-circle"></i>
      Outlined
    </button>

    <button class="button is-outlined">
      Outlined
      <i class="is-right-icon fa-regular fa-circle"></i>
    </button>

    <button class="button is-text">
      <i class="is-left-icon fa-regular fa-circle"></i>
      Text
    </button>

    <button class="button is-text">
      Text
      <i class="is-right-icon fa-regular fa-circle"></i>
    </button>

  </div>

Muted

  <button class="button is-muted">Default</button>
  <button class="button is-primary is-muted">Primary</button>
  <button class="button is-secondary is-muted">Secondary</button>
  <button class="button is-info is-muted">Info</button>
  <button class="button is-success is-muted">Success</button>
  <button class="button is-warning is-muted">Warning</button>
  <button class="button is-danger is-muted">Danger</button>

Width

You can make the button to fill all the available space by using
the is-full-width modifier.

  <button class="button is-tiny is-full-width block">Tiny</button>
  <button class="button is-small is-full-width block">Small</button>
  <button class="button is-full-width block">Default</button>
  <button class="button is-medium is-full-width block">Medium</button>
  <button class="button is-large is-full-width block">Large</button>

Variables

Font Variables

Line Height

  :root {
    --button-xs-line-height:  .875rem;
    --button-sm-line-height:  1rem;
    --button-line-height:     1.125rem;
    --button-md-line-height:  1.25rem;
    --button-lg-line-height:  1.5rem;
  }

Font Weight

  :root {
    --button-font-weight: 500;
  }

Radius

  :root {
    --button-xs-radius: var(--radius-xs);
    --button-sm-radius: var(--radius-sm);
    --button-radius:    var(--radius-md);
    --button-md-radius: var(--radius-lg);
    --button-lg-radius: var(--radius-xl);
}

Icons

Opacity

  :root {
    --button-icon-opacity: 0.5;
  }

Colors

Default

  :root {
    --button-color:                  var(--color-contrast);
    --button-hover-color:            var(--color-contrast-110);
    --button-light-color:            var(--color-contrast-80);
    --button-hover-light-color:      var(--color-contrast-70);
    --button-background-color:       var(--color-contrast-95);
    --button-hover-background-color: var(--color-contrast-90);
  }

Primary

  :root {
    --button-primary-color:                  var(--color-primary);
    --button-hover-primary-color:            var(--color-primary-110);
    --button-primary-light-color:            var(--color-primary-80);
    --button-hover-primary-light-color:      var(--color-primary-70);
    --button-primary-background-color:       var(--color-primary-95);
    --button-hover-primary-background-color: var(--color-primary-90);
  }

Button

Sizes

Colors

Styles

Default

Active

Light

Outlined

Text

Icons

Muted

Width

Variables

Font Variables

Font Size

Line Height

Font Weight

Radius

Icons

Font Size

Opacity

Colors

Default

Primary