LightButton component for a lightweight action. It composes
Button with a ghost surface, small size, regular
font weight, and no elevation.
State ownership
LightButton uses Button’s state model and adds no state of its own. Your application supplies loading, disabled, and soon; emphasis only changes appearance. See Button’s state ownership example for managing an asynchronous action. There are no controlled and uncontrolled selection modes.
Usage
emphasis="standard" uses secondary neutral text.
emphasis="subtle" uses tertiary neutral text on ghost, outline, and soft
surfaces. Semantic colors and solid surfaces retain their contrast treatment.
Override variant, color, size, or elevated when needed.
ButtonGroup can set a shared size, surface,
and color; subtle emphasis does not replace the group’s semantic color.
Interaction
LightButton accepts Button’s native attributes, refs, event handlers, icon
slots, loading and disabled states, and render composition. Its native default
is type="button". Set type="submit" for submission or 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.
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
Adds a shadow to the button.
"standard" | "subtle"
default:"standard"
Uses secondary or tertiary text for neutral buttons. Semantic colors and solid surfaces retain their contrast treatment.
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"
default:"sm"
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:"ghost"
Visual treatment of the button surface.