Button

Primary uses brand blue; outline, secondary, and ghost stay neutral. Comfort density with accessible focus rings.

Primary action filled with brand blue.

Installation

CLI

npx @sonojs/ui@latest add button

button.tsx

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

export function Example() {
  return <Button>Button</Button>
}

Prop	Type	Default	Description
variant	"default" · "outline" · "secondary" · "ghost" · "destructive" · "link"	"default"	Visual style of the button.
size	"default" · "xs" · "sm" · "lg" · "icon" · "icon-xs" · "icon-sm" · "icon-lg"	"default"	Control height and padding.
disabled	boolean	false	Disables pointer events and dims the control.