hightouch UI

Icon Button

Button with only an icon and no label.

import { CopyIcon, IconButton } from "@hightouchio/ui";

<IconButton
icon={CopyIcon}
aria-label="Copy to clipboard"
onClick={() => {
alert("copy to clipboard");
}}
/>;

#

#

Secondary icon button has a light background and an outline.

import { IconButton, RefreshIcon } from "@hightouch/ui";

<IconButton
aria-label="Refresh data"
icon={RefreshIcon}
variant="secondary"
onClick={() => {
alert("Refresh data");
}}
/>;

#

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.

import { IconButton, RefreshIcon } from "@hightouch/ui";

<IconButton
aria-label="Refresh data"
icon={RefreshIcon}
onClick={() => {
alert("Refresh data");
}}
/>;

#

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.

import { IconButton, TrashIcon } from "@hightouch/ui";

<IconButton
aria-label="Delete model"
icon={TrashIcon}
variant="danger"
onClick={() => {
alert("Deleted model");
}}
/>;

#

import { IconButton, RefreshIcon } from "@hightouch/ui";

<IconButton
isLoading
icon={RefreshIcon}
aria-label="Refresh data"
variant="secondary"
onClick={() => {
alert("Refresh data");
}}
/>;

#

import { CopyIcon, IconButton } from "@hightouchio/ui";

<IconButton
icon={CopyIcon}
aria-label="Copy to clipboard"
size="lg"
onClick={() => {
alert("copy to clipboard");
}}
/>;

#

import { CopyIcon, IconButton } from "@hightouchio/ui";

<IconButton
icon={CopyIcon}
aria-label="Copy to clipboard"
size="sm"
onClick={() => {
alert("copy to clipboard");
}}
/>;

#

Secondary

Tertiary

Danger

Initial

Disabled

Loading

#

#

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

#

Inherits margin props.

#

Type: boolean
Default: false

Toggles the disabled state.

#

Type: string

Button's meaning for screen readers.

#

Type: ComponentType<SVGAttributes<SVGElement>>

Button icon.

#

Type: () => void

Callback for when button is clicked.

On this page