Button
Displays a button or a component that looks like a button.
Installation
›pnpm dlx shadcn@latest add @evolphin/button
Usage
import { Button } from "@/components/ui/button";<Button variant="outline">Button</Button>Type Definitions
interface ButtonProps {
/** The visual style of the button */
?:
| "default"
| "destructive"
| "outline"
| "secondary"
| "ghost"
| "link";
/** The size of the button */
?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
/** Used to force mounting when more control is needed */
?: boolean;
}Examples
Default
Secondary
Destructive
Outline
Ghost
Link
Sizes
Icon
With Icon
Loading
As Child
API Reference
Button
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link""" | "default" | The visual style of the button. |
size | "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg""" | "default" | The size of the button. |
asChild | boolean | false | Change the component to the HTML tag or custom component of the only child. |
className | string | - | Additional CSS classes |