Buttons

Buttons

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 Base

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.


About 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.


Overview of CSS Classes

Selector.slds-button
Summary

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

Restrictbutton, a, span
VariantTrue
Selector.slds-button_neutral
Summary

Creates the gray border with white background default style

Restrict.slds-button
ModifierTrue
Selector.slds-button_brand
Summary

Creates the brand blue Salesforce style

Restrict.slds-button
ModifierTrue
Selector.slds-button_inverse
Summary

Creates the inverse style for dark backgrounds

Restrict.slds-button
ModifierTrue
Selector.slds-button_destructive
Summary

Creates a red button style

Restrict.slds-button
ModifierTrue
Selector.slds-button_success
Summary

Creates a green button style

Restrict.slds-button
ModifierTrue
Selector.slds-button_small
Summary

Creates a smaller button style

Restrict.slds-button
Selector.slds-button__icon
Summary

Sizing for icon that sits inside button__icon

Restrict.slds-button svg
Selector.slds-button__icon_large
Summary

Large size button icon svg

Restrict.slds-button__icon
Selector.slds-button__icon_small
Summary

Small size button icon svg

Restrict.slds-button__icon
Selector.slds-button__icon_x-small
Summary

x-small size button icon svg

Restrict.slds-button__icon
Selector.slds-button__icon_left
Summary

Position of icon when sitting to the left side of the text when inside a button

Restrict.slds-button__icon, .slds-button__icon_stateful
Selector.slds-button__icon_right
Summary

Position of icon when sitting to the right side of the text when inside a button

Restrict.slds-button__icon, .slds-button__icon_stateful
Selector.slds-button_stateful
Summary

Initiates a stateful button

Restrictbutton, a, span
VariantTrue
Selector.slds-not-selected
Summary

Default state of a stateful button

Restrict.slds-button_stateful
ModifierTrue
Selector.slds-is-selected-clicked
Summary

When button is selected and still has focus from click

Restrict.slds-button_stateful
ModifierTrue
Selector.slds-is-selected
Summary

When button is pressed and selected

Restrict.slds-button_stateful
ModifierTrue