Button

Actions

Triggers actions with four visual variants, three sizes and a built-in loading state that preserves layout and announces itself to screen readers.

import { Button } from "@componentforge/react";

Examples

Flip the props — the rendered component and generated code update live.

Propsvariantsizeloading

Renders a native <button> (type="button" by default) so Space/Enter activation and form semantics come for free.
Loading state sets aria-busy="true" and disables the control; a spinner is decorative (aria-hidden).
Focus ring is drawn only on :focus-visible so pointer clicks don't show it.

Key	Action
`Enter / Space`	Activate the button.
`Tab`	Move focus to the next focusable element.

Selected props — every component also spreads native HTML attributes.

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "danger"	"primary"	Visual emphasis.
size	"sm" \| "md" \| "lg"	"md"	Control height and padding.
loading	boolean	false	Shows spinner, disables interaction, sets aria-busy.
fullWidth	boolean	false	Stretch to container width.