Button

Triggers an action with a single tap or click. Contained, outlined, and text styles across primary, secondary, tertiary, orange, and error colors.

Open in FigmaView in Storybook

Preview

Code

Inspect

Appearance

iconOnly

Content

children

startIconName

endIconName

State

loading

disabled

Layout & behavior

fullWidth

Props — Button

Prop	Type	Description
`variant`	`"contained" \| "outlined" \| "text"`	Visual style: filled, outline, or text-only.
`color`	`"primary" \| "secondary" \| "tertiary" \| "orange" \| "error"`	Color role for the button surface and text. Tertiary is only for text + icon-only; orange is only for the run button (contained). Other combos fall back (tertiary→secondary, orange→primary).
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Control height. Default medium (40).
`iconOnly`	`boolean`	Square icon-only geometry; inferred when no children.
`startIconName`	`FaIconName`	Leading Font Awesome icon.
`endIconName`	`FaIconName`	Trailing Font Awesome icon.
`disabled`	`boolean`	Disables interaction.
`fullWidth`	`boolean`	Stretches to the container width.
`children`	`ReactNode`	Button label content.