See what's coming soon with Carbon V10-beta.

Skip to main content
Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.

Experimental primary button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--primary
  "
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental secondary button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--secondary
  "
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental tertiary button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--tertiary
  "
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental ghost button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--ghost
  "
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental danger button

Vanilla JS

<!-- 
  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--primary
  "
   aria-label="danger" 
  type="button"
>
  Button
</button>
<button
  class="bx--btn bx--btn--danger--primary
  "
   aria-label="danger" 
  type="button" disabled
>
  Button
</button>
<button
  class="bx--btn bx--btn--danger--primary
  "
   aria-label="danger" 
  type="button"
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--danger--primary
  "
   aria-label="danger" 
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental small primary button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--primary
   bx--btn--sm"
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental small secondary button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--secondary
   bx--btn--sm"
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental small tertiary button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--tertiary
   bx--btn--sm"
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental small ghost button

Vanilla JS

<!-- 
  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 class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--ghost
   bx--btn--sm"
  
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

Experimental small danger button

Vanilla JS

<!-- 
  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--primary
   bx--btn--sm"
   aria-label="danger" 
  type="button"
>
  Button
</button>
<button
  class="bx--btn bx--btn--danger--primary
   bx--btn--sm"
   aria-label="danger" 
  type="button" disabled
>
  Button
</button>
<button
  class="bx--btn bx--btn--danger--primary
   bx--btn--sm"
   aria-label="danger" 
  type="button"
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>
<button
  class="bx--btn bx--btn--danger--primary
   bx--btn--sm"
   aria-label="danger" 
  type="button" disabled
>
  With icon
    <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
    </svg>
</button>

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

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>