║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Button description: A button or a component that looks like a button.

<ComponentPreview name="button-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/button

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Import the following variables into your CSS file</Step>

@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

:root {
  --destructive-foreground: oklch(0.505 0.213 27.518);
}

.dark {
  --destructive-foreground: oklch(0.704 0.191 22.216);
}

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="button" title="components/ui/button.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

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

<ComponentPreview name="button-demo" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Outline

<ComponentPreview name="button-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Secondary

<ComponentPreview name="button-secondary" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Destructive

<ComponentPreview name="button-destructive" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Destructive Outline

<ComponentPreview name="button-destructive-outline" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Ghost

<ComponentPreview name="button-ghost" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Link

<ComponentPreview name="button-link" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Extra-small Size

<ComponentPreview name="button-xs" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Small Size

<ComponentPreview name="button-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Large Size

<ComponentPreview name="button-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Extra-large Size

<ComponentPreview name="button-xl" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Disabled

<ComponentPreview name="button-disabled" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Icon

<ComponentPreview name="button-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Icon Small Size

<ComponentPreview name="button-icon-sm" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Icon Large Size

<ComponentPreview name="button-icon-lg" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

With Icon

<ComponentPreview name="button-with-icon" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

With Link

<ComponentPreview name="button-with-link" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

With Kbd

<ComponentPreview name="button-with-kbd" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

Loading

<ComponentPreview name="button-loading" className="[&_[data-slot=code]_pre]:h-[240px] [&_[data-slot=preview]>*]:h-[240px]" />

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 → render on Button

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

<span data-lib="radix-ui"> ```tsx title="shadcn/ui" // [!code word:asChild] <Button asChild> <Link href="/login">Login</Link> </Button> ``` </span> <span data-lib="base-ui"> ```tsx title="coss ui" // [!code word:render] <Button render={<Link href="/login" />}>Login</Button> ``` </span

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║