Button Icons

Button Icons

Buttons icons provide the user with visual iconography that is typically used to invoke an event or action.

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Button Icons

Accessibility

If an icon button doesn’t include a label, use a title attribute to show on hover for sighted users, and a span with .slds-assistive-text to describe the icon for screen readers.


Overview of CSS Classes

Selector.slds-button_icon
Summary

Creates a button that looks like a plain icon

Restrictbutton
VariantTrue
Selector.slds-button_icon-container
Summary

Default width + height for button icon with containers

Restrict.slds-button_icon
Selector.slds-button_icon-border
Summary

Transparent themed button icon - Button icon has a border with a transparent background

Restrict.slds-button_icon
Selector.slds-button_icon-border-inverse
Summary

Button icon with border and transparent background, to be used on an inversed background

Restrict.slds-button_icon
Selector.slds-button_icon-brand
Summary

Branded button icon - Button icon has a filled background with the brand color

Restrict.slds-button_icon
Selector.slds-button_icon-border-filled
Summary

Neutral themed button icon - Button icon has a border with a filled background

Restrict.slds-button_icon
Selector.slds-button_icon-inverse
Summary

Bare button icon with no border or background, to be used on an inversed background

Restrict.slds-button_icon
Selector.slds-button_icon-error
Summary

Error state - Typically used in conjunction with an error toolip

Restrict.slds-button_icon
Selector.slds-button_icon-small
Summary

Changes a button icon container to be 24x24px

Restrict.slds-button_icon
Selector.slds-button_icon-x-small
Summary

Changes a button icon container to be 20x20px

Restrict.slds-button_icon
Selector.slds-button_icon-xx-small
Summary

Changes a button icon container to be 16x16px

Restrict.slds-button_icon
Selector.slds-button_icon-more
Summary

Creates a button menu icon container that has borders and a filled background

Restrict.slds-button_icon
Selector.slds-button_icon-container-more
Summary

Creates a button menu icon container that has no borders

Restrict.slds-button_icon
Selector.slds-button__icon_hint
Summary

A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered.

Restrict.slds-button_icon .slds-button__icon
Selector.slds-button__icon_inverse-hint
Summary

A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background.

Restrict.slds-button_icon .slds-button__icon
Selector.slds-is-selected
Summary

Stateful Button Icon

Restrict.slds-button_icon
VariantTrue
Selector.slds-button_icon-border-filled
Summary

Creates a button icon inside of a filled container with a border

Restrictbutton
VariantTrue
Selector.slds-button_icon-border-inverse
Summary

Creates a button icon inside of a transparent container with a border on an inversed background

Restrictbutton
VariantTrue
Selector.slds-button_icon-border
Summary

Creates a button icon inside of a transparent container with a border

Restrictbutton
VariantTrue
Selector.slds-button_icon-brand
Summary

Creates a brand button icon

Restrictbutton
VariantTrue
Selector.slds-button_icon-inverse
Summary

Creates a button icon inside of a transparent container with a border on an inversed background

Restrictbutton
VariantTrue
Selector.slds-button_icon-container
Summary

Creates a button icon inside of a transparent container

Restrictbutton
VariantTrue