Component

Button

Sizes sm/md/lg, all 6 tones, 4 appearances, loading and icon slots.

Tones

All 6 decorative tones, contained appearance. Button's tone is purely visual (ComponentTone) - it carries no status meaning, unlike Alert or Toast's semantic variant.

Fuji's native visual language treats default as the main action tone - it resolves to the --fuji-default token. Pass tone to switch to one of the other five decorative tones (earth, fire, water, forest, sun) - purely a visual choice, not a status signal.

Sizes

sm / md / lg, default tone.

Appearance

solid (contained), outlined (bordered), dashed, text (ghost).

Icon button

Icon-only buttons across colors; aria-label is required at the type level.

Loading

loading disables interaction and shows a spinner without changing the button's width

Disabled

Button group

API reference

Prop	Type	Default	Description
tone	ComponentTone	"default"	Decorative color.
appearance	contained \| bordered \| dashed \| ghost	"contained"	Visual treatment.
size	"sm" \| "md" \| "lg"	"md"	Control height.
loading	boolean	false	Shows a spinner and disables the button.
className	string	None	Additional classes applied to the component root.

tone"default"

ComponentTone

Decorative color.

appearance"contained"

contained | bordered | dashed | ghost

Visual treatment.

size"md"

"sm" | "md" | "lg"

Control height.

loadingfalse

boolean

Shows a spinner and disables the button.

classNameNone

string

Additional classes applied to the component root.