- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Input
- Label
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
button-demo
Loading...
import { Button } from "@/components/ui/button";
export function Demo() {
return (
<div>
<Button>Button</Button>
</div>
);
}
pnpm dlx shadcn@latest add "https://aliimam.in/r/button-demo.json"button-demo
Loading...
import { Button } from "@/components/ui/button";
export function Demo() {
return (
<div>
<Button>Button</Button>
</div>
);
}
pnpm dlx shadcn@latest add "https://aliimam.in/r/button-demo.json"button-demo
Loading...
import { Button } from "@/components/ui/button";
export function Demo() {
return (
<div>
<Button>Button</Button>
</div>
);
}
pnpm dlx shadcn@latest add "https://aliimam.in/r/button-demo.json"Installation
pnpm dlx shadcn@latest add button
Usage
import { Button } from "@/components/ui/button";<Button variant="outline">Button</Button>Link
You can use the asChild prop to make another component look like a button. Here's an example of a link that looks like a button.
import { Link } from "next/link";
import { Button } from "@/components/ui/button";
export function LinkAsButton() {
return (
<Button asChild>
<Link href="/login">Login</Link>
</Button>
);
}