AI Buttons

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

Usage
Code

Types


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.

Appearances



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.

States

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

Structure

AI buttons


PropertyValue(s)
Height32px
Corner radius4 px


Structure - AI buttons Structure - AI buttons

Configurations

AI Button


PropertyValue(s)Default value
Appearance
  • Primary
  • Basic
Primary

AI Icon Button


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

Usage

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?