Browse components

Button

Pill-shaped button with HeroUI-inspired variants, sizes, and a press scale.

Install

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

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

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

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/button.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/button.

Import

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

example.tsx

import { Button } from "@/components/ui/button"export function Example() {  return <Button>Primary</Button>}

Variants

example.tsx

<Button>Primary</Button><Button variant="secondary">Secondary</Button><Button variant="outline">Outline</Button><Button variant="ghost">Ghost</Button><Button variant="destructive">Destructive</Button>

API Reference

Button

Base UI Button with CVA variants. Also accepts the primitive’s props (`disabled`, `nativeButton`, `render`, …).

Prop	Type	Default
variant	"primary" \| "secondary" \| "tertiary" \| "outline" \| "ghost" \| "destructive" \| "destructive-soft" \| "link"	"primary"
size	"sm" \| "md" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"	"md"
fullWidth	boolean	false
className	string	—

className — Merged onto the button styles.

Notes

`buttonVariants` is exported if you need the same styles on a plain element.
When placed in a `ButtonGroup`, unset `variant` and `size` inherit from the group.
Use `render` (Base UI) to compose a custom trigger — do not use `asChild`.