Button Icons

button-icons

.slds-button_icon, .slds-button_icon-brand, .slds-button_icon-container, .slds-button_icon-border, .slds-button_icon-border-filled, .slds-button_icon-inverse, .slds-button_icon-border-inverse — Buttons icons provide the user with visual iconography that is typically used to invoke an event or action.

base

.slds-button_icon — Creates a button that looks like a plain icon

base › Base - Hint on hover

base › Button Icon - LBC Mismatch

.slds-button_icon-container

.slds-button_icon-container — Default width + height for button icon with containers

.slds-button_icon-border

.slds-button_icon-border — Transparent themed button icon - Button icon has a border with a transparent background

.slds-button_icon-border-inverse

.slds-button_icon-border-inverse — Button icon with border and transparent background, to be used on an inversed background

.slds-button_icon-brand

.slds-button_icon-brand — Branded button icon - Button icon has a filled background with the brand color

.slds-button_icon-border-filled

.slds-button_icon-border-filled — Neutral themed button icon - Button icon has a border with a filled background

.slds-button_icon-inverse

.slds-button_icon-inverse — Bare button icon with no border or background, to be used on an inversed background

.slds-button_icon-error

.slds-button_icon-error — Error state - Typically used in conjunction with an error toolip

.slds-button_icon-warning

.slds-button_icon-warning — Warning state - Typically used in conjunction with an warning tooltip

.slds-button_icon-current-color

.slds-button_icon-current-color — Apply the current color to the icon contained within

large

.slds-button_icon-large — Changes a button icon container to be 48x48px

small

.slds-button_icon-small — Changes a button icon container to be 24x24px

x-small

.slds-button_icon-x-small — Changes a button icon container to be 20x20px

xx-small

.slds-button_icon-xx-small — Changes a button icon container to be 16x16px

.slds-button_icon-more

.slds-button_icon-more — Creates a button menu icon container that has borders and a filled background

.slds-button_icon-container-more

.slds-button_icon-container-more — Creates a button menu icon container that has no borders

.slds-button__icon_hint

.slds-button__icon_hint — 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.

.slds-button__icon_inverse-hint

.slds-button__icon_inverse-hint — 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.

stateful

.slds-is-selected — Stateful Button Icon

bordered-filled-container

.slds-button_icon-border-filled — Creates a button icon inside of a filled container with a border

bordered-filled-container › Bordered Filled - With dropdown

bordered-filled-container › Bordered Filled - Hint on hover

bordered-inverse

.slds-button_icon-border-inverse — Creates a button icon inside of a transparent container with a border on an inversed background

bordered-inverse › Bordered Inverse – With dropdown

bordered-inverse › Bordered Inverse – Hint on hover

bordered-transparent-container

.slds-button_icon-border — Creates a button icon inside of a transparent container with a border

bordered-transparent-container › Bordered Transparent - With dropdown

bordered-transparent-container › Bordered Transparent - Hint on hover

brand

.slds-button_icon-brand — Creates a brand button icon

inverse

.slds-button_icon-inverse — Creates a button icon inside of a transparent container with a border on an inversed background

inverse › Inverse - With dropdown

inverse › Inverse - Hint on hover

transparent-container

.slds-button_icon-container — Creates a button icon inside of a transparent container