AI Buttons
Intro
AI buttons allow users to trigger an AI-powered feature available within the user flow. The AI icon lets users know where AI-powered actions are available.
AI button in full-page dialog (left) and a page (right)
Usage
Do
- Adhere to the rules for SAP Fiori Buttons.
- 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 or labels, such as:
- Create with AI
- Enhance with AI
- Generate with AI
- Don’t add trailing icons.
- Don’t use vague or unclear button labels.
- Don’t use two primary buttons in a button group.
Example of AI buttons that use leading star icons and have concise labels describing the action
Example of AI buttons that have a mix of leading star icon usage and have extensive labels
Anatomy
A. Container
The container contains an icon and text. With different background colors defined in SAP Fiori Buttons, it visualizes the type and state of the AI button.
B. Icon
The sparkle icon indicates that the action is an AI-powered feature.
C. Text
The text field describes the action that is triggered by the AI button.
AI button anatomy
Behavior and Interaction
AI Content Generation
Tapping the “Generate” AI button triggers the content generation process. The example below shows how the AI button could change during the content generation process.
Stopping AI Generation Process
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.
Resuming AI Generation Process
Once the generation process is completed or stopped by the user, the “Stop Generating” button transitions into a “Revise” button.
Resources
SAP Fiori for Android: AI Buttons
SAP Fiori for Web: AI Buttons, Quick Prompts
Related Components: Buttons