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.

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

#Loading

#Large

#Small

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