Actions

Button

Primary interactive control with five variants, two sizes, icon slots, and fullWidth.

Props

Button extends ButtonHTMLAttributes<HTMLButtonElement>. Every standard button attribute (type, form, autoFocus, …) forwards.

ButtonProps props

Prop	Type	Default	Description
`variant`	`ButtonVariant`	`"default"`	"default" \| "primary" \| "outline" \| "ghost" \| "danger"
`size`	`ButtonSize`	`"md"`	"sm" \| "md"
`leftIcon`	`ReactNode`	—	Slot before the label text.
`rightIcon`	`ReactNode`	—	Slot after the label text.
`fullWidth`	`boolean`	—	Stretches the button to fill its container.
`loading`	`boolean`	—	Replaces the leading icon with a Spinner and disables the button. The label remains visible.
`disabled`	`boolean`	—	Prevents interaction and applies disabled styling.
`onClick`	`() => void`	—	Click handler.
`children`	`ReactNode`	—	Button label.

Button variants

Button sizes

Button with icons

Full-width button

Disabled states

ImportTSX

import { Button } from "@solarius/onset";
import type { ButtonVariant, ButtonSize } from "@solarius/onset";