Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Desktop Window
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Frame
- Heading
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Live Waveform
- Marker
- Menubar
- Message
- Message Scroller
- Meter
- Meter Ring
- Native Select
- Navigation Menu
- NumberCount
- Pagination
- Popover
- Progress
- Progress Ring
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Timeline
- Toast
- Toggle
- Toggle Group
- Tooltip
Compositions
Utilities
import { Button } from "@/components/ui/button"
export default function ButtonDemo() {Installation#
bunx --bun shadcn@latest add @ondo-ui/button
Usage#
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>Examples#
Variants#
default, outline, secondary, ghost, info, success, warning, destructive, and link.
import { Button } from "@/components/ui/button"
export default function ButtonVariants() {Sizes#
xs, sm, default, lg, xl, and 2xl, plus icon-only sizes icon-xs, icon-sm, icon, icon-lg, icon-xl, and icon-2xl.
import { IconPlus } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"API reference#
The component wraps Base UI Button and accepts all of its props.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "secondary" | "ghost" | "info" | "success" | "warning" | "destructive" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "xl" | "2xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl" | "icon-2xl" | "default" |