Get started

Button

A versatile button component with variants and sizes.

The Button component is the primary call-to-action element in Kiwimi Lab. It supports multiple variants, sizes, and can render as a link.

Preview

Usage

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

<Button variant="default">Deploy</Button>
<Button variant="outline">Cancel</Button>
<Button size="sm">Small</Button>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | variant | "default" | "outline" | "ghost" | "default" | Visual style | | size | "default" | "sm" | "lg" | "default" | Button size | | asChild | boolean | false | Render as child element | | disabled | boolean | false | Disable interaction |

Variants

Default

Solid background for primary actions.

TSX
<Button variant="default">Save changes</Button>

Outline

Bordered style for secondary actions.

TSX
<Button variant="outline">Learn more</Button>

Ghost

Minimal style for tertiary actions.

TSX
<Button variant="ghost">Dismiss</Button>