Button Icons

Button Icons

Buttons are used to invoke an event

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
ModifierTrue
Selector.slds-button_icon-border
Summary

Creates an icon button with a border

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

Gives a white icon color on a dark background

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

Button icon with background

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

Button icon on inversed background

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

Button icon for errors

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

Button icon container - size small modifier

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

Button icon container - size x-small modifier

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

Button icon container - size xx-small modifier

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

Button icon with dropdown

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

Stateful Button Icon

Restrict.slds-button_icon
VariantTrue
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
VariantTrue
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