Button with only an icon and no label. An aria-label is required so the action stays accessible to screen readers.

#Usage

#Primary

Use this variant for call-to-action buttons that need to draw a user's attention.

#Secondary

Secondary icon button has a light background and an outline.

#Tertiary

Use this variant for all icon buttons that don't qualify for the other variants.

This is a default variant, so you don't have to explicitly specify it via variant prop.

#Danger

Use this variant for icon buttons that trigger dangerous or destructive actions. For example, deletion of some resource.

This variant should be used on the last step before deletion.

#Shape

Use the circle shape to display a circular icon button.

#Loading

#Size

The size prop may be used to render larger or smaller buttons. "sm" is the smallest recommended size, according to accessibility standards.

"xs" and "2xs" are special cases for the journeys product, where the canvas may be zoomed.

#Combinations

#Default shape

#Circle shape

#Guidelines

#When to use

• When performing an action in a space too tight for a text label — for example dismissing a drawer, removing a table row, or a toolbar control.
• When the icon alone makes the action obvious, and always with an aria-label.

#When not to use

• If the action is not obvious from the icon alone, use a button with a text label instead.
• If you're navigating to a different page within the app, use a link button instead.
• If the action is destructive or risky, prefer a labeled button — explicit labels beat icons for dangerous actions, and unlike button there is no warning icon button. Use variant="danger" only when an icon-only control is unavoidable.
• If the button sends or stops a prompt input, use PromptInputSubmitButton instead — it builds on the primary circular icon button and owns the send, blocked, loading, and stop states plus their tooltip.

#Icons

• Only use icons from Hightouch UI.
• Don't override icon size.
• Prefer outline icons over solid ones.

#Props

Inherits margin props.

Name	Default	Description
isLoading	false	booleanToggles the loading state.
isDisabled	false	booleanToggles the disabled state.
aria-label	—	stringButton's meaning for screen readers.
icon	—	ComponentType<SVGAttributes<SVGElement>>Button icon.
size	"md"	"2xs" | "xs" | "sm" | "md" | "lg"Determines the height of the button.
shape	"default"	"default" | "circle"Determines the shape of the button
variant	"tertiary"	"primary" | "secondary" | "tertiary" | "danger"Button variant.
onClick	—	(event: MouseEvent<HTMLButtonElement>) => voidCallback for when button is clicked.