MainButton component for a prominent action. It composes
Button with a solid surface, elevation, semibold
text, and 12px horizontal padding. Its default color is neutral and size is md.
State ownership
MainButton uses Button’s state model and adds no state of its own. Your application supplies loading, disabled, and soon; there are no controlled and uncontrolled selection modes. See Button’s state ownership example for managing an asynchronous action.
Usage
fullWidth or provide application
layout styling. Override variant, color, size, and elevated as needed;
for example, use variant="outline" and elevated={false} for an outlined action.
Keep page layout in your application’s styling.
Interaction
MainButton accepts Button’s native attributes, event handlers, refs, icon slots,
loading, disabled, and soon props. Buttons default to type="button";
set type="submit" explicitly for form submission.
Use href for a link. Supply render to choose a custom root, including an
application-owned router link. The root must preserve a native button, or an
anchor when href is set. Button derives the interaction behavior from href.
ButtonGroup can set a shared size, surface,
and color. Consumer classes, including state functions, pass through to the root.
Props
string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
"neutral" | "accent" | "danger" | "success"
Semantic color of the button.
boolean
default:"true"
Adds a shadow to the button.
ReactNode
Decorative content displayed after the label.
boolean
default:"false"
Whether the button should be focusable when disabled.
boolean
Expands the button to fill its container width.
string[]
Keyboard shortcut hints displayed on non-mobile screens.
boolean
Shows a loading indicator and disables activation while preserving the button width.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
Caller-supplied root element or renderer. Preserve a native button, or an anchor when
href is set. Router integration belongs to the caller."sm" | "md"
Button height:
sm (24px) or md (32px).boolean
Displays a coming-soon label and disables activation.
string
Text for the coming-soon label.
ReactNode
Decorative content displayed before the label.
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
"solid" | "outline" | "ghost" | "soft"
default:"solid"
Visual treatment of the button surface.