Button

Reusable button component with multiple variants and sizes.

Installation

npx scrollx-ui@latest add button

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

<Button>Default</Button>
<Button variant="link">Link</Button>
<Button variant="success">Success</Button>

<Button variant="gradient" size="lg">
  Get Started
</Button>

Button is the main component used to render a customizable button.

Property	Type	Default	Description
`variant`	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" \| "success" \| "warning" \| "info" \| "dark" \| "light" \| "gradient" \| "glass"	`"default"`	Controls the visual style of the button.
`size`	"sm" \| "default" \| "lg" \| "icon"	`"default"`	Adjusts the button size.
`asChild`	boolean	`false`	Renders the button as its child using Slot.
`className`	string	`—`	Additional custom class names.
`...props`	HTMLButtonElement attributes	`—`	Inherits all standard button attributes and events.