AI button

AI button in Storybook

Usage

Overview

The AI button enables users to perform GenAI-related actions and make choices, with a single click. The general best practices for AI buttons are the same as for Jutro buttons. The main visual difference is the use of royal purple (#524AF6) as the primary color for AI buttons.

When to use

• Within AI-enabled components: Use inside AI cards, AI sections, or other AI-focused components to trigger a specific AI task. Examples: "Check coverage," "Analyze documents," "Request report."
• As an AI trigger: Use as the primary trigger to open a dedicated AI interface, such as an AI panel, AI menu, or a modal containing GenAI features.
• For user confirmation: Use within an AI chat or workflow to get explicit approval for an AI-generated response or action before it's finalized. Examples: "Approve and insert," "Accept suggestion," "Confirm and send."

When not to use

• For non-AI actions, such as standard “Save” or “Cancel,” use the button component instead.
• For suggested prompts within an AI chat experience, use the chips pattern instead.
• For general system functions or actions that don't involve Generative AI, such as accessing settings, closing a modal, or a standard file upload.

AI button types

Primary, secondary, and tertiary styling is determined based on action hierarchy for the page and workflow, as it is for standard Jutro actions.

Note: Neutral and inverse styling are available exclusively for the icon-only button.

Type	Purpose
AI button with star icon	Use to initiate AI actions.
AI button without icon	Use for standard actions within AI workflows and follow-up actions such as human acceptance.
Icon-only button	For limited use only. Use for Submit prompt and other very established concepts. Do not use to open the chat assistant. Use the AI logo floating action button instead.

Formatting

Anatomy

The AI button consists of the following elements:

1. Primary buttons display containers (A) around a text label (B) with an optional icon (C). Primary buttons have a solid background color.
2. Secondary buttons display containers (A) around a text label (B) with an optional icon (C). Secondary buttons have a visible stroke and no background color.
3. Tertiary buttons display a text label (B) with an optional icon (C).

The icon-only button includes primary, secondary, tertiary, neutral, and inverse stylings. It consists of the following elements:

4. Icon buttons display containers (A) around a mandatory icon (C).

Alignment and placement

Usage of sparkle icon

The sparkle icon is a specific visual cue used to differentiate generative AI actions from standard workflow actions.

Use the icon to signify that a button will initiate a new, independent AI task, such as generating content, starting an analysis, or performing a complex action.

Don't use the sparkle icon for simple, responsive actions like Accept or Dismiss, even if they are part of an AI feature. Overusing the icon dilutes its meaning and creates visual clutter, making it harder for users to spot the primary generative actions.

Use the AI button with a sparkle icon to indicate that it performs an independent AI action.

Don't use the sparkle icon for simple, responsive actions like Accept. The icon loses its specific meaning and becomes visual noise.

Placement of icons

Always place the sparkle icon on the left side of the AI button label.

Don't place the sparkle icon on the right side of the AI button label or with additional icons.

Content

General writing guidelines

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

AI buttons follow the same content guidelines as standard buttons. For all rules on label writing, conciseness, tone, and formatting, see the button content guidelines.

Behaviors

States

	State	Description
	Enabled	Communicates to the user that the element is enabled for interaction (default).
	Hover	Indicates that the user has placed a cursor over the element (desktop only). The Hover state can be used with the Enabled state.
	Focus	Indicates that the user has highlighted the element, typically using an input method such as keyboard or voice. The Focus state can be used with all other states (including Disabled).
	Active	Indicates that the user is clicking or tapping the element. The Active state can be used with the Enabled and Hover states.
	Disabled	Communicates to the user that the element is not interactive. Every button is Accessible Disabled by default. That means the disabled button can be focused.

Accessibility

The AI button element represents an HTML button that is used to perform GenAI-related actions and make choices. Text between the opening and closing tags appears as the text of the button.

This component is designed to meet WCAG 2.1 AA accessibility guidelines. The contrast ratio of textual elements against their background is above 4.5:1. Non-textual content that needs to convey meaning (such as icons) and the keyboard focus indicator have a contrast ratio of at least 3:1 with their adjacent colors.

However, changes made by the content author can affect accessibility conformance.

Follow the guidance below and refer to the WAI-ARIA Authoring Practices for Buttons when using this component in your applications:

• The button text must clearly describe the action of the button.
• If applying custom color themes, check that the contrast ratio of text against its background meets the required threshold.

Code

<AIButton
  label="AI Button"
/>

Import statement

import { AIButton } from '@jutro/experimental-ai-components';

Component contract

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Properties

labelobligatoire

Type

IntlMessageShape

Description

Label text displayed on the button. This is also passed as a default value to the button's aria-label.

className

Type

string

Description

CSS class name for this component.

disabled

Type

boolean

Description

If set to true, the button is disabled. IMPORTANT: this prop overrides the native HTML disabled attribute. In this case, the button is still tabbable, even when it's disabled.

fullWidth

Type

boolean

Description

If set to true, the button will take the full width of its parent container.

hideLabel

Type

boolean

Description

If set to true, the label is not displayed.

icon

Type

Icon

Description

An Icon component to render on the component. The value must be an Icon component. For example, AiGeneratedSparkleIcon.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

size

Type

'small' | 'medium'

Description

Sets the size of button (small, medium).

Valeur par défaut

'medium'

variant

Type

'primary' | 'secondary' | 'tertiary' | 'neutral' | 'inverse'

Description

Sets the variant of button to display (primary, secondary, tertiary, neutral, inverse) Note: neutral and inverse variants are applicable to buttons with icons only.

Valeur par défaut

'primary'

Hooks

Aucun crochet n'est disponible pour AI button.

Translation keys

Il n'existe aucune traduction pour AI button.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Escape hatches

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Passing HTML properties to the component

You can use HTML button attributes, except any of the ones which are overridden by Jutro.

<AIButton
  label="Click me"
  onClick={handleClick}
  id="my-button"
  variant="primary"
/>

Passing this id property makes it part of the HTML button that is created in the HTML DOM.

AI button custom behaviors

Accessible disabled component

The AI button component remains accessibility compliant, even when disabled.

Accessible disabled AI button components have the following characteristics:

• The disabled HTML attribute is removed.
• An additional property called aria-disabled is defined.
• All callback functions, such as onClick and onBlur, are muted and unable to be called.
• The HTML type attribute value of Button will be changed to button.
• If the button has the href attribute provided, then its role is changed to link and its tabIndex is changed to 0.

Examples

Check out the Usage section for details about how to design an AI button properly, and the different configuration options we provide.

Basic example

An AI button is functionally identical to the Jutro button component. The difference between the two is cosmetic: the AI button uses different formatting to identify it as a trigger for GenAI-powered actions.

<AIButton label="AI Button"/>
<Button label="Standard Button"/>

Changelog

10-12-x-iteration-1

The AIButton component was added for internal testing.