Button

Installation

bunx @prototyperco/cli add button

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/button.json

npx shadcn@latest add https://prototyper-ui.com/r/button.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/button.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/button.json

This will add the following files to your project:

• components/ui/button.tsx

Usage

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

<Button>Click me</Button>;

Examples

Destructive

Outline

Secondary

Ghost

Primary Soft

Destructive Soft

Success

Warning

Link

Icon

With Icon

Loading

Press

Styling

Data Slots

Use data-slot attributes to target the button in CSS:

Customization Examples

/* Make all buttons pill-shaped */
[data-slot="button"] {
  @apply rounded-full;
}

{
  /* Use className for one-off overrides */
}
<Button className="rounded-full px-8">Pill Button</Button>;

API Reference

Button

A clickable button element with gradient variants.

All Base UI Button props are forwarded via ...props.

buttonVariants

A cva helper exported for use outside of the <Button> component (e.g., applying button styles to links).

import { buttonVariants } from "@/components/ui/button";

<a className={buttonVariants({ variant: "outline" })}>Link styled as button</a>;

Accessibility

Keyboard Interactions

ARIA Attributes

• Renders as a native <button> element by default via Base UI.
• aria-disabled="true" is set when isPending is true.
• data-pending attribute is set during the pending state for styling.

Compose

This component is available in @prototyperco/compose.

Related