AI Buttons

AI-Powered Primary Button

AI-powered Primary actions should be represented by an AI-Powered Primary Button containing a label and the AI sparkle.

AI-powered primary buttons can be used to emphasize initiating an AI process, but they are not required if no immediate AI action is to be taken. Use standard Primary or Secondary button styles if AI powers multiple actions on a page.

Do
Empty state with the primary button being AI powered to

Use AI-Powered Primary Buttons if the main action of an interface is AI-Powered.

 

AI Secondary Buttons

Secondary actions display the same as regular secondary actions, using a secondary button. However, these components can include the sparkle icon to reinforce the AI action it will initiate IF the feature IS NOT low risk.

Do
After-call work panel with wrap-up code search and AI-suggested code button options without sparkles.

If the AI features is low-risk AND there are multiple options, we can ommit the sparkle icons.

Do
Utterances list with a 'generate utterances' button with the sparkles icon.

If the feature is not lower risk, and there's not an abundance of secondary buttons, we can use the sparkle icon.