Button

import { Button } from "@hel/ui/button"

export function ButtonDemo() {

Usage#

Copyimport { Button } from "@hel/ui/button"

Copy<Button>Button</Button>

Variants#

There are five styles. default is the solid, high emphasis button, and it is what you get when you don't set a variant. Use secondary and outline for supporting actions, ghost for toolbars and dense layouts, and link when the action should read like text.

import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"

Destructive intent#

Set intent="destructive" on actions that remove or undo something. It works with the default, outline and ghost variants.

import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"

Sizes#

sm is the default. Use md and lg where a control needs more room, like in a form or a hero section.

import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"

Roundness#

Corners are square by default. round turns the button into a pill.

import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"

Icons#

Pass an icon component to leadingIcon, trailingIcon, or both. Give it the component itself, not an element, and the button renders it at 16px.

import { Map, Trash } from "lucide-react"

import { Button } from "@hel/ui/button"

Count and keyboard hint#

count adds a small number after the label, such as a result total. kbd adds a hint chip at the end of the button. It only displays text, so it doesn't bind a shortcut.

import { Button } from "@hel/ui/button"
import { Flex } from "@hel/ui/flex"

Hotkey#

To bind a real shortcut, use hotkey. It clicks the button from anywhere on the page, and the hint is formatted for the visitor's platform. Mod stands for the main modifier key of that platform. The shortcut is ignored while the button is disabled or loading.

Copy<Button hotkey="Mod+S">Save</Button>

Disabled#

A disabled button can't be pressed and loses its hover state.

import { Map } from "lucide-react"

import { Button } from "@hel/ui/button"

Loading#

loading swaps the leading icon for a spinner and stops the button from being pressed, while keeping its look. loadingText replaces the label, for example with "Saving...". The button stays focusable, so keyboard focus isn't lost when it starts loading, and it reports aria-busy to assistive technology. Press the button to try it.

import * as React from "react"
import { Save } from "lucide-react"

Full width#

fullWidth stretches the button to the width of its container.

import { Button } from "@hel/ui/button"
import { Stack } from "@hel/ui/stack"

Animation#

Buttons scale down slightly while pressed. To turn that off, set disableAnimation.

Copy<Button disableAnimation>Button</Button>

API Reference#

Button#

Button also accepts every prop of the Base UI button, such as disabled, render and onClick, and it forwards a ref to the underlying element.

buttonVariants#

buttonVariants returns the class names for a button. Use it to give another element, like a link, the look of a button.

Copyimport { buttonVariants } from "@hel/ui/button"
 
<a href="/pricing" className={buttonVariants({ variant: "outline" })}>
  See pricing
</a>