Buttons

Buttons

Buttons are used to invoke an event

Base

Preview

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_stateful
Summary

Initiates a stateful button

Restrict.slds-button
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
Selector.slds-button__icon
Summary

Sizing for icon that sits inside button__icon

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

Large size button icon svg

Restrict.slds-button__icon
ModifierTrue
Selector.slds-button__icon_small
Summary

Small size button icon svg

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

x-small size button icon svg

Restrict.slds-button__icon
ModifierTrue