Icon Button

Button with only an icon and no label.

#Usage

#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

#Icons

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

#Props

Inherits margin props.

#isDisabled

Type: boolean
Default: false

Toggles the disabled state.

#aria-label

Type: string

Button's meaning for screen readers.

#icon

Type: ComponentType<SVGAttributes<SVGElement>>

Button icon.

#onClick

Type: () => void

Callback for when button is clicked.