information

We will continue to evolve this pattern and the usage guidelines based on insights from product teams and other experts across SAP. Please submit feedback for improvements through the Design System Jira (select “Business AI” in the Stakeholder field), and check our AI button Jira ticket and AI patterns roadmap for the latest updates.

Current version 1 has been reviewed by the SAP design system team and the following activities are in progress: SAPUI5 and SAP Fiori technical planning.

Intro

AI buttons allow users to trigger an AI-powered feature available as a quick prompt within the user interface. The AI icon lets users know where AI-powered actions are available.

The AI button extends the following components to enable new AI-specific interactions:

AI buttons

AI buttons

Usage

Do

  • Adhere to the rules for SAP Fiori buttons. For details, see the button guidelines for SAPUI5 and SAP Web Components.
  • Use secondary action buttons by default.
  • Only use leading icons.
  • Only use the star icon.
  • Use primary buttons only for the primary action on the page or panel.
  • Ensure button labels are concise and descriptive of the action they perform.

Don't

  • Don’t include “AI” in the button text.

  • Don’t add trailing icons.

  • Don’t use vague or unclear button labels.

  • Don’t use two primary buttons in a button group.

  • Don’t use labels like:

    • Create with AI
    • Enhance with AI
    • Generate with AI

Anatomy

AI button anatomy

AI button anatomy

  1. Container: Different background colors visualize the type and state of the AI button.
  2. Text: Describes the action that is triggered by the AI button.
  3. Icon: Indicates that the action is an AI-powered feature.

For more information, see AI Icon, Menu Button, and the Quick Prompts pattern.

Types

Text and Icon

Regular icon/text button to trigger an AI-powered action.

AI button with text and icon

AI button with text and icon

When more AI capabilities or options are present, users can select and trigger an AI-powered action from the menu.

AI button with menu

AI button with menu

Icon Menu Button

Use the AI icon menu button if there is not enough space for the default-sized menu button.

AI icon button with menu

AI icon button with menu

Behavior and Interaction

Example: Content Generation

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

  1. Clicking the Generate AI button triggers the content generation process.

AI button before content generation

AI button before content generation

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

AI button during content generation

AI button during content generation

  1. Once the generation process is completed or stopped by the user, the Stop Generating button transitions into an AI menu button (here: Revise).

AI button after content generation

AI button after content generation

Guidelines

Implementation

Specifications