Updated: July 16, 2024


ui5-button | v1.0


Buttons allow users to trigger an action and come in a variety of shapes and colors.

Buttons – live examples
Buttons with semantics – live examples
Disabled buttons

When to Use


Use the button:

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

Don’t use the button:


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


Three button variants are available to indicate the action:

  • Text only
  • Icon only
  • Text and icon

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:

  • Primary
  • Secondary (= standard)
  • Tertiary
Button variants for prioritization – live examples
(from top to bottom: primary, secondary, tertiary)

Related Links


(UI5 Web Components documentation)