Button

A clickable button component with multiple variants and states.

Import

import { Button } from "@heroui/react";

Usage

import { Button } from "@heroui/react";

export function Basic() {
  return <Button onPress={() => console.log("Button pressed")}>Click me</Button>;
}

Variants

import { Button } from "@heroui/react";

export function Variants() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
    </div>
  );
}

Sizes

import { Button } from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Full Width

import { Button } from "@heroui/react";

export function FullWidth() {
  return (
    <div className="w-[400px] space-y-3">
      <Button fullWidth>Primary Button</Button>
      <Button fullWidth variant="secondary">
        Secondary Button
      </Button>
    </div>
  );
}

Disabled State

import { Button } from "@heroui/react";

export function Disabled() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button isDisabled>Primary</Button>
      <Button isDisabled variant="secondary">Secondary</Button>
      <Button isDisabled variant="tertiary">Tertiary</Button>
      <Button isDisabled variant="danger">Danger</Button>
    </div>
  );
}

API Reference

Button Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'outline' \| 'ghost' \| 'danger'`	`'primary'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`fullWidth`	`boolean`	`false`	Whether the button should take full width of its container
`isDisabled`	`boolean`	`false`	Disable the button
`isPending`	`boolean`	`false`	Shows pending / loading state

See the HeroUI Button docs for more variants, render props, and custom styling recipes.