Intro

AI buttons allow users to trigger AI-powered actions, such as the examples listed at quick prompts.

AI buttons in text and icon, split menu, menu, and icon menu variants in emphasized, secondary and tertiary button types.

AI button variants

When to Use

Do

Use the AI button:

  • To enable users to access AI-powered functions.
  • To group AI actions related to one specific element or page.

Don't

Don't use the AI button:

  • Where AI-powered functions add no value.
  • For non-AI functions.
  • Adhere to the rules for SAP design system buttons. For details, see the button guidelines for SAPUI5 and SAP Web Components.
  • Use secondary action buttons by default.
  • Use primary buttons only for the primary action on the page or panel.
  • Only use leading icons.
  • Only use the sparkles icon.
  • Use concise button labels that clearly describe the action they represent.
  • Don’t include “AI” in the button label such as Create with AI, Enhance with AI, Generate with AI.

Anatomy

The AI button is made up of the following elements to enable AI-powered functions:

Foundational elements

Base components

AI button

  1. Container: Different background colors visualize the type and state of the AI button.
  2. Text: Descriptive label that clearly conveys the action that is invoked by the AI button.
  3. Icon: Provides emphasis and symbolic identification of the action as AI-powered in addition to the label.

AI button anatomy comprises an AI icon followed by the button label.

AI button anatomy

AI menu button

  1. Container: Different background colors visualize the type and state of the AI button.
  2. Text: Descriptive label that clearly conveys the group of actions that can be triggered by the AI menu button.
  3. Icon: Provides emphasis and symbolic identification of the action as AI-powered in addition to the label.
  4. Arrow: Indicates that choosing this button opens a menu with a group of options.

AI menu button anatomy comprises an AI icon followed by the button label and the menu down arrow icon.

AI menu button anatomy

AI split menu button

  1. Container: Different background colors visualize the type and state of the AI button.
  2. Text: Descriptive label that clearly conveys the action that can be triggered by the left interactive area.
  3. Icon: Provides emphasis and symbolic identification of the action as AI-powered in addition to the label.
  4. Arrow: Indicates that choosing this button opens a menu with a group of options.
  5. Separator: Indicates that the two areas result in different actions.

AI split menu button anatomy comprises an AI icon followed by the button label in the left interactive area. The separator follows as a delimiter to the the menu down arrow icon interactive area.

AI split menu button anatomy

Variants

AI button

Use the simple variant for scenarios involving a single AI action.

Simple AI button variant comprises an AI icon followed by the button label.

AI button with icon and label

guideline
Your button label and tooltip must clearly reveal that the action is enabled by AI.

AI menu button

Use the menu variant to offer multiple AI actions. Users can select and trigger an AI-powered action from the drop-down menu.

AI menu button variant comprises an AI Icon followed by the button label and the menu down arrow icon.

AI menu button with icon and label

AI icon menu button variant comprises an AI Icon followed by the menu down arrow icon.

AI menu button with icon only

guideline
Hiding the button label is only exceptionally allowed for the menu button and within the AI writing assistant.

AI split menu button

Use the split menu variant to offer one main action with additional related options. The drop-down menu can list refinements or variations for the main action.

The split menu button is separated into two areas: the left area with the AI icon and the main action label and the right area with the arrow icon that opens the menu. The separator between them signals that the two areas result in different actions.

AI split menu button

Behavior and Interaction

The example below shows how the AI button changes during the content generation process.

  1. Choosing the Generate AI button triggers content generation.

Dialog features a text area with a 'Generate' AI button positioned above the top right corner to start the content generation process.

AI button before triggering the content generation

  1. During content generation, the button changes its appearance and function. The Generate button changes into a Stop Generating button, allowing users to stop the process at any time.

Dialog features a text area during the content generation process with a ’Stop generating’ button replacing the AI button above the top right corner of the text area.

AI button during content generation

  1. Once generation is complete or stopped by the user, the Stop Generating button changes into an AI menu button. In this example, it becomes Revise following the quick prompt pattern. This could otherwise be Regenerate.

Dialog features a text area after the content generation process is completed with the ‘Stop generating’ button replaced by an AI menu button 'Revised’ above the top right corner of the text area.

AI button after content generation

Elements and Controls

Implementation

Visual Design