information
This is guideline has been retired. Please do not use.
Overview
Interacting with AI does not always have to be through conversational means. Often products contextualize AI operatioan and make them specific to the content displayed on the page. In such embedded AI use cases the trigger for AI is an AI Button a.k.a. Magic Button.
AI Button - Look and Feel
When to Use
2
do
false
Recommended
- Use an AI Button when the users should not refine the associated operation.
- Use only one AI Button per affected section. If there are multiple AI operations available, open a menu.
- Always use the AI icon when using AI Buttons.
- Treat the button text as any other button. Be explicit and use verbs (ex., Generate, Validate, Verify).
dont
false
Not Recommended
- Avoid using AI Button if you cannot produce consistent results. Use a conversational style instead.
Anatomy
1
22.19; 39.24
Primary AI Button
An AI button that replaces the emphasized button on the screen and is the most prominent and natural user action.
2
22.81; 79.48
Secondary AI Button
An AI button that is used in headers, toolbars and inside item components.
Behavior
Apart from carrying a specific style for AI, the AI Button is no different that any other button when it comes to interaction.
Responsiveness
As any other button the AI Button supports both desktop and mobile sizes for optimal experience.
