Button

A flat button. Thick navy outline, pastel fill, six color variants, and a snappy press feel. Supports loading, leadingIcon, trailingIcon, and asChild for composing with other elements.

Variants

button-basic-demo.app

With icons

Pass any React node through leadingIcon or trailingIcon.

button-icons-demo.app

Loading state

When loading is true, the button becomes disabled, swaps the children for a spinner, and sets aria-busy. Use loadingText to keep a label visible.

button-loader-demo.app

Installation

terminal.sh

npx y2kui@latest add button

Usage

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

<Button onClick={() => console.log("clicked")}>Save</Button>;

Props

Prop	Type	Default	Description
`variant`	'default' \| 'pink' \| 'blue' \| 'mint' \| 'lilac' \| 'lemon' \| 'outline' \| 'secondary' \| 'ghost' \| 'destructive' \| 'link'	`'default'`	Pastel color style for the button.
`size`	'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon' \| 'icon-xs' \| 'icon-sm' \| 'icon-lg'	`'default'`	Visual size of the button.
`loading`	boolean	`false`	Show a spinner, disable the button, and set aria-busy.
`loadingText`	string	—	Optional label shown while loading (defaults to children).
`leadingIcon`	ReactNode	—	Icon rendered before the children.
`trailingIcon`	ReactNode	—	Icon rendered after the children.
`asChild`	boolean	`false`	Render as a Radix Slot so you can compose with your own element.
`disabled`	boolean	`false`	Disable the button (also set automatically when loading).