Button
An accessible button with primary, secondary, ghost, destructive, and outline variants.
Installation
bunx shadcn@latest add https://ui.razeev.com/r/button.jsonUsage
tsx
import { Button } from "@/components/hangry-ui/components/button";
<Button variant="outline">Continue</Button>Variants
Use the variant prop to choose from: primary, secondary, ghost, destructive, outline. The preview above shows the available variants together.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "destructive" | "outline" | "primary" | Button appearance. |
children | ReactNode | "Get started" | Button label or content. |
type | "button" | "submit" | "reset" | "button" | Native button behavior. |
disabled | boolean | false | Prevents interaction. |
onClick | MouseEventHandler<HTMLButtonElement> | — | Called when the button is clicked. |
className | string | "" | Additional CSS classes on the component root. |
Native props | ComponentProps<"button"> | — | Forwards native button attributes, aria-* attributes, and event handlers. |
Setup notes
Use Tailwind CSS v4. Borders use the global border-border token. No rounded classes or additional packages are required. Customize content with props and styling with className.