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

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

AI Icon Button

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

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

Basic Button

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.

Primary Button

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

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

States - AI Button States - AI Button

AI Icon Button

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

States - AI Icon Button States - AI Icon Button


AI buttons

Corner radius4 px

Structure - AI buttons Structure - AI buttons


AI Button

PropertyValue(s)Default value
  • Primary
  • Basic

AI Icon Button

PropertyValue(s)Default value
Large Icon
  • True
  • False
Sparkle position
  • Top
  • Bottom


Position of magic sparkle icon in an icon button

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 Position of magic sparkle icon in an icon button

Was this page helpful?