Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- DrawerNew
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- OTP FieldNew
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Button
A button or a component that looks like a button.
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button>Button</Button>;
}
Installation
pnpm dlx shadcn@latest add @coss/button
Usage
import { Button } from "@/components/ui/button"<Button>Button</Button>Link
You can use the render 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 render={<Link href="/login" />}>Login</Button>
}API Reference
This is a custom component using Base UI's useRender hook, not a direct Base UI wrapper.
Button
A button component with variant, size, and loading states.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "destructive-outline" | "ghost" | "link" | "outline" | "secondary" | "default" | Controls the button styling |
size | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | "default" | Controls the button size |
loading | boolean | false | Shows a spinner and forces disabled button behavior while loading |
render | React.ReactElement | - | Render as a different element (e.g., Link) |
When loading is true, the component:
- Renders a spinner (
data-slot="button-loading-indicator") - Adds
data-loadingon the button root - Forces the native
disabledattribute - Sets
aria-disabled="true" - Preserves button width by hiding content visually instead of unmounting it
Examples
Default
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button>Button</Button>;
}
Outline
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button variant="outline">Outline</Button>;
}
Secondary
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button variant="secondary">Secondary</Button>;
}
Destructive
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button variant="destructive">Delete</Button>;
}
Destructive Outline
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button variant="destructive-outline">Delete</Button>;
}
Ghost
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button variant="ghost">Ghost</Button>;
}
Link
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button variant="link">Link</Button>;
}
Extra-small Size
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button size="xs">Button</Button>;
}
Small Size
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button size="sm">Button</Button>;
}
Large Size
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button size="lg">Button</Button>;
}
Extra-large Size
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button size="xl">Button</Button>;
}
Disabled
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button disabled>Button</Button>;
}
Icon
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button aria-label="Add" size="icon">
<PlusIcon aria-hidden="true" />
</Button>
);
}
Icon Small Size
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button aria-label="Add" size="icon-sm">
<PlusIcon aria-hidden="true" />
</Button>
);
}
Icon Large Size
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button aria-label="Add" size="icon-lg">
<PlusIcon aria-hidden="true" />
</Button>
);
}
With Icon
import { DownloadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button>
<DownloadIcon aria-hidden="true" />
Download
</Button>
);
}
With Link
import Link from "next/link";
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button render={<Link href="/" />}>Link</Button>;
}
Loading (Built-in Prop)
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
export default function Particle() {
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
setIsLoading(true);
window.setTimeout(() => {
setIsLoading(false);
}, 1000);
};
return (
<Button loading={isLoading} onClick={handleClick}>
Submit
</Button>
);
}
Loading (Custom Composition)
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
export default function Particle() {
return (
<Button disabled>
<Spinner />
Loading...
</Button>
);
}