Buttons allow users to perform an action.

#Usage

#Primary

Use this variant for call-to-action buttons on the page that the user is expected to perform next.

There should be no more than three primary buttons on the page at once. Avoid placing two primary buttons near each other.

#Secondary

Use this variant for all buttons that don't qualify for a primary, danger, tertiary, or warning variants.

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

#Tertiary

Use this variant for a quieter button. This button does not have a border.

#Warning

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

Don't use this variant if something is deleted immediately after clicking the button. If that's the case, use danger variant.

#Danger

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

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

#On dark surfaces

Use tertiary for most controls on the dark material, and secondary for a key that needs a face, such as a labelled action. Inside a data-theme="dark" scope, both read the dark color roles, so they need no extra props. See Surfaces.

#Link

It is recommended to use Link for navigation. It is more semantically correct to use an anchor tag when navigating.

If an anchor tag may not be used, then the link variant is available.

#Loading

Buttons can indicate that an action is being processed with a loading state.

Use loading state only for short actions that take less than 5 seconds. For longer actions, use a progress bar.

#Disabled

Disabled button indicates that an action exists, but is not available currently.

When button is disabled, use a tooltip to explain why user is not allowed to take this action or what do they have to do to enable it.

#Justified

When a button is justified, it takes up the entire available container width. By default, a button size depends on length of a label inside a button.

#Size

The size prop sets the button height: sm is 24px, md (default) is 32px, lg is 40px, and xl is 48px. Use sm in inline forms, lg in wizard flows, and xl in onboarding flows. The icon grows with the button, and the padding beside an icon is trimmed so both sides look even.

#Shape

Use the circle shape to display a pill-shaped button with fully rounded corners.

#Icons

Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.

If icon indicates a direction, use directionIcon prop, which places the icon on the right side of a button.

A chevron has more empty space in its box than other icons, so Button trims the padding beside it more. All four chevron icons share the same trim, so a disclosure that flips its chevron keeps the same size.

#Images

Button can also display an image instead of an icon.

#Button groups

Use a ButtonGroup component when you need to show two or more buttons nearby.

#Combinations

#Guidelines

#When to use

• When performing an action within the system.

#When not to use

• If the action shows an icon with no text label — a toolbar control, dismissing a drawer, removing a table row — use an icon button instead.
• If you're navigating to an external URL that's not part of the current app, use a link instead.
• If you're navigating to a different page within the app, use a link button instead.

#Content

• Use sentence case.
• Keep button text to a few words max.

#Icons

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

#Sizes

• Use a justified button only inside a container with defined bounds, like a card or a dialog.
• Use a lg button only in full page flows like wizards.
• Use a sm button in inline forms.

#Props

#Button

Name	Default	Description
isLoading	—	booleanToggles the loading state.
isDisabled	—	booleanToggles the disabled state.
isJustified	—	booleanTake up an entire available container width.
children	—	ReactNodeButton text.
variant	"secondary"	"primary" | "secondary" | "tertiary" | "danger" | "warning" | "link"Button variant, which determines the purpose the button is used for and its appearance.
size	—	"sm" | "md" | "lg" | "xl"Determines the height of the button.
shape	"default"	"default" | "circle"Determines the shape of the button.
icon	—	ComponentType<SVGAttributes<SVGElement>>Primary icon that's displayed on the left. Only icon or imageUrl can be set at the same time.
directionIcon	—	ComponentType<SVGAttributes<SVGElement>>Icon for indicating the direction, displayed on the right side of the button. Used for icons like "arrow right" or "caret down". Pass a component defined outside render: an inline one remounts on every render, which drops clicks on it.
directionIconSize	—	4 | 5 | 6Override the default direction icon size, in space units. Use only when absolutely necessary.
imageUrl	—	stringURL to an image to display on the left. Only icon or imageUrl can be set at the same time.