The Button component provides a flexible, accessible button with multiple visual variants and sizes.
Installation
npx shadcn@latest add @eo-n/button
Install dependencies
Install the required packages:npm install @base-ui/react class-variance-authority
Copy component code
Copy and paste the button component code into your project at components/ui/button.tsx.
Update imports
Update the import paths to match your project setup.
import { Button } from "@/components/ui/button";
export default function Example() {
return <Button>Click me</Button>;
}
Examples
Variants
Button comes with multiple visual variants:
<Button variant="default">Primary</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
Icon Button
import { Search } from "lucide-react";
<Button size="icon">
<Search />
</Button>
<Button size="icon-sm">
<Search />
</Button>
<Button size="icon-lg">
<Search />
</Button>
With Icon
import { Mail } from "lucide-react";
<Button>
<Mail />
Login with Email
</Button>
Loading State
import { Loader2 } from "lucide-react";
<Button disabled>
<Loader2 className="animate-spin" />
Please wait
</Button>
Active State
<Button active>Active Button</Button>
API Reference
Extends all props from @base-ui/react Button component.
The visual style of the button.Options: default | destructive | outline | secondary | ghost | link
The size of the button.Options: default | sm | lg | icon | icon-sm | icon-lg
Whether the button is in an active state.
Whether the button is disabled.
Additional CSS classes to apply to the button.
TypeScript
import { Button as ButtonPrimitive } from "@base-ui/react";
import { VariantProps } from "class-variance-authority";
type ButtonVariants = VariantProps<typeof buttonVariants>;
type ButtonProps = React.ComponentProps<typeof ButtonPrimitive> &
ButtonVariants & {
active?: boolean;
};
