Floating button

Floating button in Storybook

Warning: This is an experimental component

This experimental component might not yet be fully accessible, fully documented, or fully covered by design tokens, and its API and behavior might change more frequently than stable components.

For more information, see Introduction to experimental components and properties.

Usage

Overview

A floating button is an icon-only button that remains fixed on screen and provides a persistent, always-available point of interaction. You can use the aiMode property to configure it as the entry point for GenAI-powered experiences.

When to use

• As a persistent, always-available entry point across pages.
• As the primary trigger to open a dedicated AI interface.

When not to use

• Don't use the floating button to perform a specific action in context. Use a button for task-level actions inside cards, panels, or other components instead.

Formatting

Anatomy

Floating buttons consist of the following elements:

1. Basic floating button displays a container (A) around an icon (B).
2. AI variant floating button displays a container (A) around an icon (B).

AI variant

The AI variant of the floating button uses the aiMode property to apply a gradient purple visual treatment, visually distinguishing it from the basic floating button and signaling that it launches a GenAI-powered feature. Use it as the primary, persistent trigger for opening a dedicated AI interface.

Accessibility

The floating button component is an icon-only button used to trigger a persistent action or toggle the visibility of a panel or 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, which the component renders as an aria-label. This ensures screen readers identify the button correctly immediately upon focus.
• 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

<FloatingButton label="primary"/>

Import statement

import { 
    FloatingButton,
 } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

labelrequired

Type

IntlMessageShape

Description

Label text passed as a default value to the button's aria-label.

aiMode

Type

boolean

Description

If set to true, the button is styled to indicate it launches a GenAI powered feature.

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.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

variant

Type

'primary' | 'inverse'

Description

Sets the variant of button to display. This is used to switch colors when a dark-mode theme is enabled.

Default value

'primary'

Hooks

No hooks are available for floating button.

Translation keys

There are no translations for floating button.

For information on how to manage translations, see our section about Internationalization.

Escape hatches

For more information, see our documentation about escape hatches.

Passing HTML properties to the component

You can use HTML button attributes, except any that are overridden by Jutro.

<FloatingButton
  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.

Floating button custom behaviors

Accessible disabled component

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

Accessible disabled 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 is 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

See the Usage section for details about how to design a floating button properly, and the different configuration options available.

Basic floating button

The FloatingButton component is a circular button with an icon. It is intended to be used to add a persistently visible button onto a page.

<FloatingButton label="primary"/>

Floating button using AI mode

You can use the aiMode prop to change the visual style of the button to indicate that it launches a GenAI-powered feature.

<FloatingButton label="Ai mode" aiMode/>

Changelog

10.14.0

Added experimental floating button component.