Button

Primary button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--primary"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--primary"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--primary"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--primary"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--primary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center ">
  <span class="bx--assistive-text">Add</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Secondary button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--secondary"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--secondary"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--secondary"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--secondary"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center ">
  <span class="bx--assistive-text">Add</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Tertiary button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--tertiary"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--tertiary"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--tertiary"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--tertiary"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Ghost button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--ghost"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--ghost"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--ghost"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--ghost"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Danger button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--danger"
   aria-label="danger"  type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--danger"
   aria-label="danger"  type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--danger"
   aria-label="danger"  type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--danger"
   aria-label="danger"  type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Small primary button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--primary bx--btn--sm"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--primary bx--btn--sm"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--primary bx--btn--sm"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--primary bx--btn--sm"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--primary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center  bx--btn--sm">
  <span class="bx--assistive-text">Add</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Small secondary button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--secondary bx--btn--sm"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--sm"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--sm"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--sm"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--secondary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center  bx--btn--sm">
  <span class="bx--assistive-text">Add</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Small tertiary button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--tertiary bx--btn--sm"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--tertiary bx--btn--sm"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--tertiary bx--btn--sm"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--tertiary bx--btn--sm"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Small ghost button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--ghost bx--btn--sm"
   type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--ghost bx--btn--sm"
   type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--ghost bx--btn--sm"
   type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--ghost bx--btn--sm"
   type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Small danger button

Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="bx--btn bx--btn--danger bx--btn--sm"
   aria-label="danger"  type="button">
  Button
</button>
<button
  class="bx--btn bx--btn--danger bx--btn--sm"
   aria-label="danger"  type="button" disabled>
  Button
</button>
<button
  class="bx--btn bx--btn--danger bx--btn--sm"
   aria-label="danger"  type="button">
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>
<button
  class="bx--btn bx--btn--danger bx--btn--sm"
   aria-label="danger"  type="button" disabled>
  With icon
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M9 7V3H7v4H3v2h4v4h2V9h4V7z"></path></svg>
</button>

Button set

Vanilla JS
React Angular CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--btn-set">
  <button class="bx--btn bx--btn--secondary">
    Secondary Button
  </button>
  <button class="bx--btn bx--btn--primary">
    Primary Button
  </button>
</div>

<div class="bx--btn-set">
  <button class="bx--btn bx--btn--secondary bx--btn--disabled" disabled>
    Secondary Button
  </button>
  <button class="bx--btn bx--btn--primary bx--btn--disabled" disabled>
    Primary Button
  </button>
</div>

Documentation

SCSS

Mixins

Mixins specific to button are located in src/components/button/_mixins.scss.

Name Params Description
button-base Base styles used in every button. Used in @mixin button-theme by default
button-theme bg-color, border-color, font-color, hover-bg-color, icon-color Used to create variant styles for a button (Variations like, primary, secondary, etc.)

Modifiers

Use these modifiers with .bx--btn class.

Selector Description
.bx--btn--primary Selector for applying primary button styles
.bx--btn--secondary Selector for applying secondary button styles
.bx--btn--tertiary Selector for applying tertiary button styles
.bx--btn--danger Selector for applying danger button styles
.bx--btn--sm Selector for applying small button styles
.bx--btn—ghost Selector for applying ghost button styles
.bx--btn--icon-only Selector for applying icon button styles

FAQ

Using icons with buttons

All buttons can use icons. It's recommended to inline SVG icons when possible. Simply add the appropriate <svg> to the button HTML with the bx--btn__icon class. You can also include <title> for better accessibility to describe what the button does.

<button class="bx--btn bx--btn--secondary" type="button">
  Secondary
  <svg
    class="bx--btn__icon"
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill-rule="evenodd"
  >
    <title>add a new connection to your instance</title>
    <path
      d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"
    ></path>
  </svg>
</button>

Icon-only buttons

When using the icon-only button variant, tooltip styles must also be imported for the component to display properly.

Edit this page on GitHub
Previous
Components: Breadcrumb
Next
Button: Usage