AI floating button

AI floating button in Storybook

Usage

Overview

The AI floating button provides a standardized trigger for the AI chat interface. It is used to toggle the visibility of the chat window.

When to use

Use the AI floating button as a persistent, always-available entry point to AI experiences across pages.

When not to use

Don't use the AI floating button to perform a specific AI action in context. Instead, use an AI button for those task-level actions (inside cards, chat, or panels).

Formatting

Anatomy

AI floating buttons consist of the following elements:

1. Default AI floating buttons display containers (A) around an icon (B).
2. Inverse AI floating buttons display containers (A) around an icon (B) with an outline (C).

Placement

Place the button in the bottom-right corner of the screen so users can find it quickly. Use a high z-index so the button floats above all other content and isn't clipped.

Do place the AI floating button in the bottom-right corner of the screen.

Don't place the AI floating button inline in the header. It's a floating control that sits in a fixed bottom-right position on the screen.

Accessibility

The AI floating button component is an icon-only button used to toggle the visibility of the AI chat interface.

This component is designed to meet WCAG 2.1 AA accessibility guidelines. Non-textual content that needs to convey meaning (the icon) 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 or the specific implementation context can affect accessibility conformance.

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

• Labels: Provide a descriptive label using the label prop (for example, label="Toggle AI chat"), which the component renders as an aria-label. This ensures screen readers identify the button correctly immediately upon focus.
• State indication: Because this button controls a collapsible window, use the aria-expanded attribute to indicate state. Set aria-expanded="true" when the chat is open, and aria-expanded="false" when it is closed.
• Focus management: When the user selects this button to open the chat, focus must move to the chat window. When the user closes the chat, focus must return to this button.
• Zoom and layout: Ensure the floating button does not obscure essential content, interactive elements, or scrollbars, especially when the page is zoomed to 400%.

Code

<Grid>
    <GridItem>
        <AIFloatingButton variant="default"/>
    </GridItem>
    <GridItem>
        <AIFloatingButton variant="inverse"/>
    </GridItem>
</Grid>

Import statement

import { 
    AIFloatingButton,
 } 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 passed as a default value to the button's aria-label.

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.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

variant

Tipo

'default' | 'inverse'

Descripción

Sets the variant of button to display.

Valor predeterminado

'default'

Hooks

No hay ganchos para AI floating button.

Translation keys

No hay traducciones para AI floating 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.

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

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

AI floating button custom behaviors

Accessible disabled component

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

Accessible disabled AI floating 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 floating button properly, and the different configuration options available.

Basic AI floating button

The AIFloatingButton component is a circular button with an icon that indicates the action it triggers is powered by GenAI. It comes in two styles: 'default' and 'inverse'.

<Grid>
    <GridItem>
        <AIFloatingButton variant="default"/>
    </GridItem>
    <GridItem>
        <AIFloatingButton variant="inverse"/>
    </GridItem>
</Grid>

Changelog

10-12-x-iteration-2

The AIFloatingButton component was added for internal testing.