Button

A versatile button component with multiple variants and sizes

A button component built with Ark UI that supports multiple variants and sizes.

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

export default function Example() {
  return <Button>Click me</Button>;
}

View Code

When to use Button

Use variant="default" for primary actions and variant="outline" for secondary actions. Keeping this hierarchy improves UI readability.

Installation

bash

liminal add button

Usage

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

export default function Example() {
  return <Button>Click me</Button>;
}

View Code

Examples

Variants

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

View Code

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon" aria-label="Icon button">
  <span className="i-lucide-settings" />
</Button>

View Code

API

Prop	Type	Default	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Visual style of the button.
size	"sm" \| "default" \| "lg" \| "icon"	"default"	Controls height and padding of the button.
asChild	boolean	false	Renders as another element (Link, a, etc.) while keeping styles.