Button

import { Button } from "@/registry/herocn/ui/button";

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="destructive-soft">Destructive Soft</Button>
    </div>
  );
}

Installation

npx shadcn@latest add https://herocn.dev/r/button.json

Usage

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

<Button variant="outline">Button</Button>

Examples

Size

Use the size prop to change the size of the button.

import { Button } from "@/registry/herocn/ui/button";

export function ButtonSize() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

Component button-with-icon not found in registry.

API Reference

Button

The Button component is a wrapper around the @base-ui/react Button primitive that adds a variety of styles and functionality.

Prop	Type	Default
`variant`	`"default" \| "outline" \| "ghost" \| "secondary" \| "tertiary" \| "destructive" \| "destructive-soft"`	`"default"`
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`

Button

Installation

Usage

Examples

Size

With Icon

API Reference

Button

On this page