Updated: July 16, 2024

Button

ui5-button | v1.0

Intro

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

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:

Anatomy

  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

Variants

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

Implementation

Button
(UI5 Web Components documentation)