Button

Basic

A button allows users to perform actions through clicks, presses, taps, or keystrokes.

Installation

npx shadcn@latest add @intentui/button

Manual installation

npm i react-aria-components tailwind-variants

Anatomy

import { Button } from "@/components/ui/button"
import { IconSettings } from "@heroicons/react"

<>
  <Button intent="primary">Primary</Button>
  <Button intent="secondary">Secondary</Button>
  <Button intent="warning">Warning</Button>
  <Button intent="danger">Danger</Button>
  <Button intent="outline">Outline</Button>
  <Button intent="plain">Plain</Button>

  <Button size="xs">Extra small</Button>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>

  <Button size="sq-xs"><IconSettings/></Button>
  <Button size="sq-sm"><IconSettings/></Button>
  <Button size="sq-md"><IconSettings/></Button>
  <Button size="sq-lg"><IconSettings/></Button>
</>

Intent

Buttons come in different intents, each with its own color scheme.

Shape

Buttons support various shapes to fit different design needs.

Size

Buttons are available in multiple sizes.

With icon

You can add icons to buttons, and their color will match the button's color.

Disabled

A disabled button cannot be interacted with and is visually styled to reflect its state.

Pending

A button can indicate a pending state using the isPending prop. This provides feedback for actions that take time, communicates the status to assistive technologies, and disables interactions except for focus.

With loader

You can add a loader to indicate ongoing processes.

Link

Sometimes, you need to use styles from buttons for links. Just use the link and use the buttonStyles to the className prop.

Touch hitbox

Sometimes you may want to use this button with only an icon. In that case, you can apply the touch-target utility class on the sq-* size to increase the button’s hitbox for improved accessibility.

@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}