Button

Displays a button or a component that looks like a button.

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

export default function ButtonDemo() {

Installation

pnpm dlx shadcn@latest add @vivid-layer/button

Usage

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

<Button>Continue</Button>

Use the built-in variants to communicate action hierarchy. For semantic links, apply buttonVariants to a regular anchor or Next.js Link.

API reference

The Button accepts the props from the Base UI Button, plus these style variants:

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`	Controls the visual treatment of the button.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`	Controls the button height, padding, and icon dimensions.

Dependencies

@base-ui/react
class-variance-authority

The Registry item declares both dependencies and installs them automatically.

Accessibility

Button preserves native button semantics through Base UI. Icon-only buttons still need an accessible label supplied by the consuming interface.

Performance

Button is a DOM primitive with no animation loop or client-side effect. Its runtime work is limited to the interaction behavior required by Base UI.

Browser behavior

The component preserves native button keyboard and form behavior. When using buttonVariants on a link, the consuming link keeps its own navigation semantics.

Credits

The implementation follows the shadcn Base Nova Button pattern and builds its interaction behavior on Base UI.