Icon button

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.

#Warning

Use this variant to open a dialog, where user confirms their intent to perform a dangerous or destructive action.

#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

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

#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	boolean Toggles the loading state.
isDisabled	false	boolean Toggles the disabled state.
aria-label	—	string Button'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" | "warning" | "danger" Button variant.
onClick	—	(event: MouseEvent<HTMLButtonElement>) => void Callback for when button is clicked.