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

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

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

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Properties

labelobligatorio

Tipo

IntlMessageShape

Descripción

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

className

Tipo

string

Descripción

CSS class name for this component.

disabled

Tipo

boolean

Descripción

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

Tipo

boolean

Descripción

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

hideLabel

Tipo

boolean

Descripción

If set to true, the label is not displayed.

icon

Tipo

Icon

Descripción

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

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

size

Tipo

'small' | 'medium'

Descripción

Sets the size of button (small, medium).

Valor predeterminado

'medium'

variant

Tipo

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

Descripción

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

Valor predeterminado

'primary'

Hooks

No hay ganchos para AI button.

Translation keys

No hay traducciones para AI button.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escape hatches

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

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.