Components

Buttons

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 › ResetBase › NeutralBase › Neutral disabledBase › Neutral with left iconBase › Neutral with right iconBase › BrandBase › Brand disabledBase › DestructiveBase › Destructive disabledBase › InverseBase › Inverse disabledBase › SuccessBasedev ready

Preview

Code

<button class="slds-button">Button</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 › Neutral - Not SelectedStateful › Neutral - SelectedStateful › Inverse - Not SelectedStateful › Inverse - SelectedStatefuldev ready

Preview

Code

<button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
  <span class="slds-text-not-selected">
    <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
    </svg>Follow</span>
  <span class="slds-text-selected">
    <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
    </svg>Following</span>
  <span class="slds-text-selected-focus">
    <svg class="slds-button__icon--stateful slds-button__icon--left" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>Unfollow</span>
</button>

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

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

It uses the class .slds-not-selected in its initial state. When the user activates the button, use JavaScript to toggle the class to .slds-is-selected. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the .slds-button__icon--stateful class as well as the .slds-button__icon--left class setting the icon on the left.

Stateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is .slds-not-selected, and JavaScript is used to toggle it to .slds-is-selected 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.

Component Overview

Accessibility

If an icon button doesn’t include a label, use 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
Applied to:

button or a

Outcome:

Initializes a 2rem (32px) height button

Required:

Required

Comments:

This neutralizes all the base styles making it look like a text link

.slds-button--small
Deprecated
Applied to:

.slds-button

Outcome:

Deprecated.

Required:

No, optional element or modifier

Comments:

--

.slds-button--neutral
Applied to:

.slds-button

Outcome:

Creates the gray border with white background default style

Required:

No, optional element or modifier

Comments:

--

.slds-button--brand
Applied to:

.slds-button

Outcome:

Creates the brand blue Salesforce style

Required:

No, optional element or modifier

Comments:

--

.slds-button--destructive
Applied to:

.slds-button

Outcome:

Creates a red button style

Required:

No, optional element or modifier

Comments:

The use case for this button is things like delete, cancel, and end call rather than errors.

.slds-button--inverse
Applied to:

.slds-button

Outcome:

Creates the inverse style for dark backgrounds

Required:

No, optional element or modifier

Comments:

--

.slds-button--success
Applied to:

.slds-button

Outcome:

Creates the success style

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

.slds-button-space-left
Applied to:

button parent

Outcome:

Adds space on the left of a button wrapped in a parent

Required:

No, optional element or modifier

Comments:

Only required if the .slds-button is wrapped. ie- to include a dropdown