Button | Xui - Free UI Components to build beautiful websites

Installation

npm install @radix-ui/react-slot class-variance-authority

Usage

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

export function MyComponent() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Props

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Button style variant
`size`	`string`	`"default"`	Button size
`asChild`	`boolean`	`false`	Render as child component
`className`	`string`	-	Additional CSS classes

Variants

default - Primary button style
destructive - Destructive action style
outline - Outlined button style
secondary - Secondary button style
ghost - Ghost button style
link - Link button style

Sizes

default - Standard button size
sm - Small button size
lg - Large button size
icon - Icon-only button size

Dependencies

This component requires the following packages:

@radix-ui/react-slot
class-variance-authority