Button – Carbon Design System

Primary button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Secondary button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Tertiary button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Ghost button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Danger button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Small primary button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Small secondary button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Small tertiary button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Small ghost button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Small danger button

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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></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 7L9 3 7 3 7 7 3 7 3 9 7 9 7 13 9 13 9 9 13 9 13 7z"></path></svg>
</button>

Button set

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

Components: Breadcrumb

Button: Usage