Forms

Button

Primary action trigger. 5 variants, 3 sizes, asChild.

Primitive

@radix-ui/react-slot

Five variants for different emphasis levels.

Three sizes plus an icon-only variant.

Icon slots on left and/or right side. Pass any SVG or icon component.

Set loading=true to show a spinner and disable the button.

API Reference

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "tertiary" \| "destructive" \| "ghost"`	`"primary"`	Visual style variant.
`size`	`"sm" \| "md" \| "lg" \| "icon"`	`"md"`	Size preset.
`asChild`	`boolean`	`false`	Render as child element using Radix Slot.
`loading`	`boolean`	`false`	Show spinner. Replaces iconLeft if present, otherwise overlays label.
`iconLeft`	`ReactNode`	--	Icon rendered before the label. Replaced by spinner when loading.
`iconRight`	`ReactNode`	--	Icon rendered after the label. Hidden when loading.
`disabled`	`boolean`	`false`	Disable the button. Also set automatically when loading.

Pressable on/off button.

Action menu with keyboard nav and shortcuts.

Modal overlay for confirmations, forms, detail views.

import { Button } from "@doss/tetris-ui";