Button

A neumorphism-styled button component with multiple variants, sizes, and color palettes.

Preview

Installation

bash

npx shadcn@latest add @zerodrive/button

Then import the component:

tsx

import { Button } from "@/components/ui/button"

Variants

The button supports 6 different visual variants.

tsx

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

Sizes

Choose from multiple size options including icon sizes.

tsx

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

Icon Sizes

tsx

<Button size="icon-sm" aria-label="Small icon">
  <PlusIcon />
</Button>
<Button size="icon" aria-label="Icon">
  <PlusIcon />
</Button>
<Button size="icon-lg" aria-label="Large icon">
  <PlusIcon />
</Button>

Color Palettes

Apply different color palettes to customize the button appearance.

tsx

<Button palette="lime">Lime</Button>
<Button palette="pink">Pink</Button>
<Button palette="violet">Violet</Button>
<Button palette="purple">Purple</Button>
<Button palette="blue-gray">Blue Gray</Button>
<Button palette="gray">Gray</Button>

Outline with Palettes

Palettes also affect border colors when using the outline variant.

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "ghost" \| "link" \| "destructive"`	`"default"`	The visual style variant of the button.
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`	The size of the button.
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"gray"`	The color palette for text and focus states.
`asChild`	`boolean`	`false`	Merge props onto the immediate child element instead of rendering a button.
`className`	`string`	-	Additional CSS classes to apply.
`disabled`	`boolean`	`false`	Whether the button is disabled.

Examples

With Icon

tsx

<Button>
  <PlusIcon />
  Add Item
</Button>

As Link

Use the asChild prop to render the button as a different element.

Go to Link

tsx

<Button asChild>
  <a href="/dashboard">Go to Dashboard</a>
</Button>

Disabled

tsx

<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled Outline</Button>