Button

Displays a button that triggers an action, with variant and color token support.

Usage

button-demo.tsx

import { Button } from 'trivela-ui';

export function Example() {
  return <Button variant="outline" color="secondary">Submit</Button>;
}

Four style variants share the same size and radius, so they line up in any toolbar.

Every variant accepts the full color scale from the design tokens.

Three sizes on one height ramp shared with Input and Select, so a button beside a field lines up rather than sitting 4px short.

Children are laid out inline, so an icon plus a label needs no extra wrapper.

The native disabled attribute is forwarded to the underlying button element.

Prop	Type	Default	Description
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'solid'	Style variant for the component.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'primary'	Color scale used by the component.
size	'sm' \| 'md' \| 'lg'	'md'	Control height, padding and text size. Matches Input and Select.
className	string	—	Merged with the generated variant classes via cn().
...props	ButtonHTMLAttributes<HTMLButtonElement>	—	All native button attributes are forwarded to the root element.