AI Buttons
Fioriaibuttons
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 Jira or schedule a design consultation.
Status:
- Guidelines reviewed by the Fiori Mobile team
- Component enhancements are in progress
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.
The AI button will extend the button component to enable AI-specific interactions.
AI button in a card (left) and page (right)
Usage
Do
- Adhere to the rules for SAP Fiori Button.
- 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.
- Provide contextual hints that an AI feature is available when using the icon-only AI button.
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.
- Don't use an icon-only AI button without providing any contextual hints that an AI feature is available.
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
Example of an icon-only AI button that offers contextual hints to make the AI feature easily discoverable
Example of an icon-only AI button that lacks contextual hints, making the AI feature harder to discover
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.
AI button before (left), during (center), and after (right) generating content
Resources
Development: Buttons
SAP Fiori for iOS: AI Buttons
SAP Fiori for Web: AI Buttons, Quick Prompts
Related Components: Button