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.
Primary button
<!--
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>
Secondary button
<!--
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>
Tertiary button
<!--
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>
Ghost button
<!--
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>
Danger button
<!--
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 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
"
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>
Primary danger button
<!--
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>
Small primary button
<!--
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>
Small secondary button
<!--
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>
Small tertiary button
<!--
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>
Small ghost button
<!--
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>
Small primary danger button
<!--
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>
Small danger button
<!--
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 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
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>