Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Slider
- 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 function ButtonDemo() {
return <Button>Button</Button>
}
Installation
pnpm dlx shadcn@latest add https://coss.com/ui/r/button.json
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 function ButtonDemo() {
return <Button>Button</Button>
}
Outline
import { Button } from "@/components/ui/button"
export function ButtonOutline() {
return <Button variant="outline">Outline</Button>
}
Secondary
import { Button } from "@/components/ui/button"
export function ButtonSecondary() {
return <Button variant="secondary">Secondary</Button>
}
Destructive
import { Button } from "@/components/ui/button"
export function ButtonDestructive() {
return <Button variant="destructive">Delete</Button>
}
Destructive Outline
import { Button } from "@/components/ui/button"
export function ButtonDestructiveOutline() {
return <Button variant="destructive-outline">Delete</Button>
}
Ghost
import { Button } from "@/components/ui/button"
export function ButtonGhost() {
return <Button variant="ghost">Ghost</Button>
}
Link
import { Button } from "@/components/ui/button"
export function ButtonLink() {
return <Button variant="link">Link</Button>
}
Extra-small Size
import { Button } from "@/components/ui/button"
export function ButtonXs() {
return <Button size="xs">Button</Button>
}
Small Size
import { Button } from "@/components/ui/button"
export function ButtonSm() {
return <Button size="sm">Button</Button>
}
Large Size
import { Button } from "@/components/ui/button"
export function ButtonLg() {
return <Button size="lg">Button</Button>
}
Extra-large Size
import { Button } from "@/components/ui/button"
export function ButtonXl() {
return <Button size="xl">Button</Button>
}
Disabled
import { Button } from "@/components/ui/button"
export function ButtonDisabled() {
return <Button disabled>Button</Button>
}
Icon
import { PlusIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonIcon() {
return (
<Button size="icon">
<PlusIcon />
</Button>
)
}
Icon Small Size
import { PlusIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonIconSm() {
return (
<Button size="icon-sm">
<PlusIcon />
</Button>
)
}
Icon Large Size
import { PlusIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonIconLg() {
return (
<Button size="icon-lg">
<PlusIcon />
</Button>
)
}
With Icon
import { DownloadIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonWithIcon() {
return (
<Button>
<DownloadIcon />
Download
</Button>
)
}
With Link
import Link from "next/link"
import { Button } from "@/components/ui/button"
export function ButtonWithLink() {
return <Button render={<Link href="/" />}>Link</Button>
}
Loading
import { LoaderCircleIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonLoading() {
return (
<Button disabled>
<LoaderCircleIcon className="animate-spin" />
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.com ui quickly.
Quick Checklist
- Replace
asChild→renderonButton
Additional Notes
Size Comparison
coss.com 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.com 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.com 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