Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- EmptyNew
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input GroupNew
- KbdNew
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- SkeletonNew
- Slider
- SpinnerNew
- 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>
}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 size="icon">
<PlusIcon />
</Button>
);
}
Icon Small Size
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button size="icon-sm">
<PlusIcon />
</Button>
);
}
Icon Large Size
import { PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button size="icon-lg">
<PlusIcon />
</Button>
);
}
With Icon
import { DownloadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function Particle() {
return (
<Button>
<DownloadIcon />
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
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
export default function Particle() {
return (
<Button disabled>
<Spinner />
Loading...
</Button>
);
}
Comparing with Radix / shadcn
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.
Quick Checklist
- Replace
asChild→renderonButton
Additional Notes
Size Comparison
coss ui button sizes are more compact compared to shadcn/ui, making them better suited for
dense applications. We also introduce new sizes (xs, xl, icon-sm, icon-lg) for more granular control:
| Size | Height (shadcn/ui) | Height (coss ui) |
|---|---|---|
xs | - | 24px |
sm | 32px | 28px |
default | 36px | 32px |
lg | 40px | 36px |
xl | - | 40px |
icon | 36px | 32px |
icon-sm | - | 28px |
icon-lg | - | 36px |
So, for example, if you were using the default size in shadcn/ui and you want to preserve the original height, you should use the lg size in coss ui.
New Variants
We've added a new destructive-outline variant for better UX patterns:
- Primary actions: Use
destructive(solid red) for the main destructive action - Secondary triggers: Use
destructive-outline(outline red) to avoid alarming red buttons in the main interface
Comparison Example
<Button asChild>
<Link href="/login">Login</Link>
</Button><Button render={<Link href="/login" />}>Login</Button>On This Page