Button

Versatile button component with primary and secondary variants. Supports icons, links via href, a built-in copy-to-clipboard behavior, and multiple sizes.

Variants

tsx

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>

Sizes

tsx

<Button size="sm">Small</Button>
<Button size="default">Default</Button>

With Icon

Small

Default

tsx

<Button size="sm" icon={<Copy className="h-4 w-4" />}>Copy</Button>
<Button icon={<Copy className="h-4 w-4" />}>Copy</Button>
<Button variant="secondary" icon={<ArrowRight className="h-4 w-4" />}>
  Continue
</Button>

Copy Behavior

Click the button — it copies hello@example.com to your clipboard and swaps to a green check + "Copied!" for 2 seconds.

tsx

<Button
  variant="secondary"
  icon={<Copy className="h-4 w-4" />}
  copyValue="hello@example.com"
>
  Copy my email
</Button>

Disabled State

tsx

<Button disabled>Disabled Primary</Button>
<Button variant="secondary" disabled>Disabled Secondary</Button>

All Combinations

Primary

Secondary

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual style of the button
`size`	`"default" \| "sm"`	`"default"`	Size of the button
`icon`	`ReactNode`	-	Optional icon node rendered before the children. Typically a lucide-react icon sized h-4 w-4.
`copyValue`	`string`	-	When provided, clicking the button copies this value to the clipboard and swaps the icon/label to the copied state for 2 seconds. Forces rendering as <button> even if href is set.
`copiedLabel`	`string`	`"Copied!"`	Label shown while the copied state is active.
`copiedIcon`	`ReactNode`	`<Check className="h-4 w-4" />`	Icon shown while the copied state is active.
`href`	`string`	-	If provided (and copyValue is not), renders as a Next.js Link.
`target`	`string`	-	Link target (e.g., "_blank")
`disabled`	`boolean`	`false`	Disables the button
`children`*	`ReactNode`	-	Button content

Import

tsx

import { Button } from '@/components/ui/Button'