Components

Button Icons

Create a button with a button or a element to retain the native click function. Use a disabled attribute when a button can’t be clicked.

BaseBase › DefaultBase › ErrorBase › DisabledBase › InverseBase › Inverse disabledBasedev ready

Preview

Code

<button class="slds-button slds-button--icon" title="settings">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

The base .slds-button looks like a plain text link. It removes all the styling of the native button. It’s typically used to trigger a modal or display a “like” link. All button variations are built by adding another class to .slds-button.

Add the .slds-button--neutral class to create a neutral button, which has a white background and gray border.

Use a neutral icon button is for buttons with an icon on the left or right (not for stateful buttons). Add the .slds-button--neutral class to .slds-button.

The SVG inside receives the .slds-button__icon class. You can position the icon on the right or the left using .slds-button__icon--right or .slds-button__icon--left , which apply the correct amount of space between the icon and the text.

To create the brand button, add the .slds-button--brand class to the .slds-button class.

To create the destructive button, add the .slds-button--destructive class to the .slds-button class.

Use the inverse button on dark backgrounds. Add the .slds-button--inverse class to the .slds-button class.

StatefulStateful › Not SelectedStateful › SelectedStatefuldev ready

Preview

Code

<button class="slds-button slds-button--icon-border" aria-live="assertive" title="Like">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
  </svg>
  <span class="slds-assistive-text">Like</span>
</button>

The stateful button requires the .slds-button--icon-border class in addition to the .slds-button class.

The stateful inverse button works just like the stateful button. It requires the .slds-button--icon-borderinverse class in addition to the .slds-button class.

Stateful icons can be toggled on and off and retain their state. JavaScript is used to add the .slds-is-selected class to the button when activated.

Accessibility

For accessibility, include the attribute aria-live="assertive" on the button. The aria-live="assertive" attribute means the value of the <span> inside the button will be spoken whenever it changes.

Icon SizeIcon Size › DefaultIcon Size › LargeIcon Size › SmallIcon Size › x-SmallIcon Sizedev ready

Preview

Code

<button class="slds-button slds-button--icon" title="settings">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

Icon ContainerIcon Container › No borderIcon Container › With borderIcon Container › Filled — with borderIcon Container › Inverse - with borderIcon Containerdev ready

Preview

Code

<button class="slds-button slds-button--icon-container" title="settings">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

Icon Container SizeIcon Container Size › DefaultIcon Container Size › SmallIcon Container Size › x-SmallIcon Container Size › xX-SmallIcon Container Sizedev ready

Preview

Code

<button class="slds-button slds-button--icon-border" aria-haspopup="true" title="More Options">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
  </svg>
  <span class="slds-assistive-text">More Options</span>
</button>

Icon With Hint HoverIcon With Hint Hover › Default with no borderIcon With Hint Hover › Container with borderIcon With Hint Hover › Inverse with no borderIcon With Hint Hover › Inverse container with borderIcon With Hint Hoverdev ready

Preview

Code

<div class="slds-hint-parent">
  <button class="slds-button slds-button--icon" title="settings">
    <svg class="slds-button__icon slds-button__icon--hint" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
    </svg>
    <span class="slds-assistive-text">Settings</span>
  </button>
</div>

Icon With DropdownIcon With Dropdown › DefaultIcon With Dropdown › Default - Container OnlyIcon With Dropdown › FilledIcon With Dropdown › InverseIcon With Dropdown › Inverse - Container OnlyIcon With Dropdowndev ready

Preview

Code

<button class="slds-button slds-button--icon slds-button--icon-more" aria-haspopup="true" title="More Options">
  <svg class="slds-button__icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <svg class="slds-button__icon slds-button__icon--x-small" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
  </svg>
  <span class="slds-assistive-text">More options</span>
</button>

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create buttons.
Class NameUsage
.slds-button--icon
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 1rem×1rem like an icon, not a regular button

.slds-button--icon-bare
Deprecated
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 1rem×1rem like an icon, not a regular button

.slds-button--icon-container
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 2rem×2rem (32px) like a button

.slds-button--icon-border
Applied to:

.slds-button

Outcome:

Creates an icon button with a border

Required:

No, optional element or modifier

Comments:

This is 2rem×2rem (32px) like a button, there is no background color until hover for this style

.slds-button--icon-border-filled
Applied to:

.slds-button

Outcome:

Creates an icon button with a border

Required:

No, optional element or modifier

Comments:

This is 2rem×2rem (32px) like a button

.slds-button--icon-inverse
Applied to:

.slds-button

Outcome:

Gives a white icon color on a dark background

Required:

No, optional element or modifier

Comments:

When used alone it has a subtle hover. When used in a button-group it assumes the hover state of the buttons next to it.

.slds-button--icon-border-inverse
Applied to:

.slds-button

Outcome:

Creates an icon button with a white border

Required:

No, optional element or modifier

Comments:

There is no background color.

.slds-button--icon-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1.5rem (24px) size

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon-x-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1.25rem (20px) size

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon-xx-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1rem (16px) size

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon-more
Applied to:

.slds-button

Outcome:

Used for the style where only two icons are in a button, applies border by default

Required:

No, optional element or modifier

Comments:

This is usually an icon with a down arrow icon next to it. Each svg within is sized separately

.slds-button--icon-container-more
Applied to:

.slds-button

Outcome:

Used for the style where only two icons are in a button, has no border by default

Required:

No, optional element or modifier

Comments:

This is usually an icon with a down arrow icon next to it. Each svg within is sized separately

.slds-button--icon-more-filled
Applied to:

.slds-button--icon-more

Outcome:

Adds a white background to .slds-button--icon-more

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon
Applied to:

svg

Outcome:

Sets the size and color of the icon inside a button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--stateful
Applied to:

svg

Outcome:

This makes the icon the same color as the text in the button

Required:

No, optional element or modifier

Comments:

This is not used in addition to .slds-button__icon but instead of

.slds-button__icon--left
Applied to:

.slds-button__icon

Outcome:

Puts the icon on the left side of the button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--right
Applied to:

.slds-button__icon

Outcome:

Puts the icon on the right side of the button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--x-small
Applied to:

.slds-button__icon

Outcome:

Creates a .5rem (8px) size icon

Required:

No, optional element or modifier

Comments:

This is added to the icon inside the .slds-button, not the button itself

.slds-button__icon--small
Applied to:

.slds-button__icon

Outcome:

Creates a .75rem (12px) size icon

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--large
Applied to:

.slds-button__icon

Outcome:

Creates a 1.5rem (24px) size icon

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--hint
Applied to:

.slds-button__icon

Outcome:

Creates a grayed out icon until the parent is hovered

Required:

No, optional element or modifier

Comments:

The parent must have the .slds-hint-parent class applied

.slds-button__icon--inverse-hint
Applied to:

.slds-button__icon

Outcome:

Creates a grayed out icon until the parent is hovered for inversed dark backgrounds

Required:

No, optional element or modifier

Comments:

The parent must have the .slds-hint-parent class applied