Button

Reusable button component with multiple variants and sizes.

An accessible Button component built with Radix UI

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.

variant – Controls the visual style of the button.
Options include: default, destructive, outline, secondary, ghost, link, success, warning, info, dark, light, gradient, glass.
size – Adjusts the button size.
Options include: sm, default, lg, icon.
asChild – When set to true, renders the button as a child component using Slot. Useful for customizing the rendered element.
className – Additional custom class names to apply to the button.
...props – Inherits all standard HTML button attributes and event handlers.