Buttons

buttons

.slds-button, .slds-button_stateful, .slds-button_dual-stateful, .slds-button_reset — Buttons are used to invoke an event

base

.slds-button — This neutralizes all the base styles making it look like a text link

base › Base (Kinetics)

base › Neutral

base › Neutral (Kinetics)

base › Brand

base › Brand (Kinetics)

base › Outline Brand

base › Outline Brand (Kinetics)

base › Inverse

base › Inverse (Kinetics)

base › Destructive

base › Destructive (Kinetics)

base › Text Destructive

base › Success

base › Success (Kinetics)

base › Stretch

base › Stretch (Kinetics)

base › Full Width

base › Base as a Link

base › Neutral as a Link

base › Brand as a Link

base › Outline Brand as a Link

base › Inverse as a Link

base › Destructive as a Link

base › Text Destructive as a Link

base › Success as a Link

base › Stretch as a Link

base › Base Centering

base › Reset

.slds-button_first

.slds-button_first — Explicitly style the first button in a button group

.slds-button_middle

.slds-button_middle — Explicitly style buttons in the middle (i.e., not first or last) in a button group

.slds-button_last

.slds-button_last — Explicitly style the last button in a button group

neutral

.slds-button_neutral — Creates the gray border with white background default style

brand

.slds-button_brand — Creates the brand blue Salesforce style

outline-brand

.slds-button_outline-brand — Creates the outlined button with the brand color

inverse

.slds-button_inverse — Creates the inverse style for dark backgrounds

destructive

.slds-button_destructive — Creates a red button style

text-destructive

.slds-button_text-destructive — Creates a neutral button with red text

success

.slds-button_success — Creates a green button style

with-icon

.slds-button__icon — Sizing for icon that sits inside button__icon

with-icon › With right icon

with-icon › Icon only

large

.slds-button__icon_large — Large size for button icon svg

small

.slds-button__icon_small — Small size for button icon svg

x-small

.slds-button__icon_x-small — X-Small size for button icon svg

large

.slds-button__icon_large — Large size button icon svg

small

.slds-button__icon_small — Small size button icon svg

x-small

.slds-button__icon_x-small — X-Small size button icon svg

.slds-button__icon_left

.slds-button__icon_left — Position of icon when sitting to the left side of the text when inside a button

.slds-button__icon_right

.slds-button__icon_right — Position of icon when sitting to the right side of the text when inside a button

.slds-icon_x-small

.slds-icon_x-small

.slds-button_full-width

.slds-button_full-width — Creates a button style for full width that resets styling

.slds-button_stretch

.slds-button_stretch — Creates a button style for 100% width with centered text that maintains current styling

.slds-input__button_decrement

.slds-input__button_decrement — Positions decrement button within counter input field

.slds-input__button_increment

.slds-input__button_increment — Positions increment button within counter input field

dual-stateful

.slds-button_dual-stateful — Initiates a dual stateful button

dual-stateful › pressed

.slds-text-not-pressed

.slds-text-not-pressed — Shown text when button is not pressed - default state

.slds-text-pressed

.slds-text-pressed — Shown text when button is pressed

.slds-is-pressed

.slds-is-pressed — When button is in pressed state

stateful

.slds-button_stateful — Initiates a stateful button

.slds-not-selected

.slds-not-selected — Default state of a stateful button

.slds-text-selected

.slds-text-selected — Shown text when button is selected

.slds-text-selected-focus

.slds-text-selected-focus — Shown text when button is selected and focused

.slds-text-not-selected

.slds-text-not-selected — Shown text when button is not selected - default state

.slds-is-selected-clicked

.slds-is-selected-clicked — When button is selected and still has focus from click

.slds-is-selected

.slds-is-selected — When button is pressed and selected