Skip to content
hightouchUI

Design system

97dff0e

Upsell button

Buttons allow users to perform an action.

Usage

Refer to Button on usage patterns for an upsell button.

To use UpsellButton as a link, add the href and optional isExternal props.

Combinations

Initial

Disabled

Loading

Guidelines

When to use

  • When performing an action related to upselling customers to a different billing plan or unlocking product features.

Refer to Button for additional guidelines for an upsell button.

When not to use

  • If the action is unrelated to upgrading plans or unlocking features, use a button instead.

Props

NameDefaultDescription
isLoading

—

booleanToggles the loading state.
isDisabled

—

booleanToggles the disabled state.
isJustified

—

booleanTake up an entire available container width.
href

—

stringOptional URL to navigate to when the button is clicked. If provided, the button will render as an anchor tag.
isExternal

—

booleanIf true, the href will open in a new tab.
children

—

ReactNodeButton text.
size

—

"sm" | "md" | "lg"Determines the height of the button.
icon

—

ComponentType<SVGAttributes<SVGElement>>Primary icon that's displayed on the left.