ComponentServer-safe

Button

A tactile action primitive with a restrained accent edge and an optional Rivelle signature shape.

Installation

Explore variants and copy the resulting JSX.

VariantSizeDisabled

tsx

<Button variant="default" size="default">
  Button
</Button>

tsx

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

export function ButtonDemo() {
  return <Button variant="outline">Explore system</Button>
}

Prop	Type	Default	Description
`variant`	`"default" \| "signature" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	Controls the visual treatment. Signature enables Rivelle’s asymmetric corner.
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`	Controls height and horizontal spacing.
`asChild`	`boolean`	`false`	Composes styles and behavior onto the child element.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.