AI Buttons

AI Buttons initiate actions powered by AI and have a distinct appearance to signal users that the action utilizes AI capabilities.

AI Button looks like a Button but features a magic sparkle icon on left. It supports two appearances - basic and primary.

AI Icon Button can be used for AI actions when there is a space constraint and the meaning of the icon is universal. It features a magic sparkle icon that can be positioned on top right or bottom right of the icon button.

AI button comes in 2 appearances basis on their intent – basic and primary.

It is the default appearance of button and should be used for most AI actions that aren’t the main call to action for a page or area.

It is used to highlight the most important action on a page, in this case it being an AI powered action. It is recommended to have only one primary button per page.

AI button supports 5 states - default, hover, active, focus and disabled.

States - AI Button

Icon buttons supports 6 states - default, hover, active, focus, disabled and selected.

States - AI Icon Button

Structure - AI buttons

The magic sparkle icon can be either positioned at top-right or bottom-right in the icon button. The sparkles are position to align with the edges of icon container.

Position of magic sparkle icon in an icon button