Button

Buttons in six visual types and multiple variants. Supports custom colors and rendering as a link via asChild.

Installation

tsx

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

Basic usage

Use type for style and variant for color.

tsx

<Button type="1" variant="default">Click me</Button>
<Button type="1" variant="outline">Outline</Button>
<Button type="1" variant="secondary" size="sm">Small</Button>

Types

1 – Default rectangular button
2 – Icon-only (square)
3 – Pill (fully rounded)
4 – Square icon
5 – Link style (underline on hover)
6 – No padding; use with className for full control

tsx

<Button type="2" variant="default" aria-label="Settings">
  <Settings className="size-4" />
</Button>
<Button type="3" variant="default">Pill</Button>
<Button type="5" variant="link">Link style</Button>

As link

Use asChild to render the button as an anchor or custom element.

tsx

<Button type="1" variant="default" asChild>
  <a href="/contact">Contact</a>
</Button>

Contact

Props

Prop	Type	Default	Description
type	"1" \| "2" \| "3" \| "4" \| "5" \| "6"	"1"	Visual style: 1=default, 2=icon, 3=pill, 4=square, 5=link, 6=no padding (custom).
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Color variant.
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Button size.
htmlType	"button" \| "submit" \| "reset"	"button"	Native button type.
backgroundColor	string	-	Override background color (e.g. CSS variable or hex).
foregroundColor	string	-	Override text/icon color.
asChild	boolean	false	Render as child (e.g. Radix Slot); use for <a> or custom element.
className	string	-	Additional CSS classes.