https://www.sap.com/design-system/live-examples/Button/Button_LE_Enabled.html

Buttons – live examples

https://www.sap.com/design-system/live-examples/Button/Button_LE_SemanticEnabled.html

Buttons with semantics – live examples

https://www.sap.com/design-system/live-examples/Button/Button_LE_DisabledMix.html

Disabled buttons

Do

Use the button:

• To offer a single action, such as:
  Create, Edit, Save, Delete, Approve, Reject, Add, Remove, Cancel

Don't

Don’t use the button:

• To switch between different states. Opt for a toggle button or switch instead.
• To display a group of options. Choose a split button or segmented button instead.

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the action triggered by the button.

Anatomy of a button

Three button variants are available to indicate the action:

• Text only
• Icon only
• Text and icon

https://www.sap.com/design-system/live-examples/Button/Button_LE_VisualVariants.html

Button variants to visualize actions – live examples
(from top to bottom: text only, icon only, text and icon)

The button also visualizes the priority of the action. Three variants are available:

• Emphasized: Also known as the primary button. There should only be one primary action per page.
• Standard: Also known as the secondary button. This is the default button style.
• Transparent: This button type has no border and a transparent background around the elements (text, icon). Use transparent buttons for negative path actions.

https://www.sap.com/design-system/live-examples/Button/Button_LE_PrioritizationVariants.html

Button variants for prioritization – live examples
(from top to bottom: emphasized, standard, transparent)

Counter Badge

• Usage: Use to show a number.
• Example: Display the number of items in a shopping cart.
• Placement: Depends on the form factor: either inside the button (compact size) or on the top right corner (cozy size).

Attention Badge

• Usage: Use solely to attract the user's attention.
• Example: Indicate that a new comment is available.
• Placement: Always positioned in the top right corner, regardless of the button size (compact or cozy form factor).

Counter badge on different button types

Attention badge on different button types

The button component has two states: enabled and disabled.

• The enabled state lets the user click and use the button.
• Use the disabled state when an action can't be triggered or is temporarily unavailable.

Button in enabled and disabled state

The button component has three interaction states: regular, hover and down.

• Regular is the default state.
• The hover state occurs when you place the cursor of a pointing device (like a mouse or pen) on the button while it's enabled.
• The down state appears when you trigger the action.

Interaction states of a button

The button supports three semantic types: "Reject" for the red action, "Attention" for the orange action, and "Accept" for the green action.

• "Accept" conveys a positive meaning.
• "Reject" conveys a negative meaning.
• "Attention" highlights the need for attention.

Accept button

Reject button

Attention button

By default, the button adjusts to fit the text size. If you set the button to a fixed size, the text will truncate.

Button with different lengths

Button with fixed size and truncated text

The button supports both left-to-right (LTR) and right-to-left (RTL) reading directions. All features function in both directions. Only the variant with icon and text changes its appearance based on the reading direction. The other variants maintain their appearance.

LTR and RTL buttons