Installation
Add this component to your project using the npui CLI:
npx npui add buttonVariants & Examples
Default Button
The standard primary button.
1import { Button } from "@/components/ui/button";
2
3export function DefaultButton() {
4 return <Button>Click Me</Button>;
5}Secondary Button
A less prominent button for secondary actions.
1import { Button } from "@/components/ui/button";
2
3export function SecondaryButton() {
4 return <Button variant="secondary">Learn More</Button>;
5}Outline Button
A button with an outline, often used for alternative actions.
1import { Button } from "@/components/ui/button";
2
3export function OutlineButton() {
4 return <Button variant="outline">View Details</Button>;
5}Destructive Button
A button indicating a destructive or irreversible action.
1import { Button } from "@/components/ui/button";
2
3export function DestructiveButton() {
4 return <Button variant="destructive">Delete Item</Button>;
5}Props
These are the available props for the Button component:
| Prop | Type | Description | Default |
|---|---|---|---|
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | The visual style of the button. | "default" |
| size | "default" | "sm" | "lg" | "icon" | The size of the button. | "default" |
| asChild | boolean | Renders the button as a child of another component, passing its props. | false |
| children | React.ReactNode | The content of the button. | - |