LightButton component for a lightweight action. It composes
Button with a ghost surface, small size, regular
font weight, and no elevation.
Usage
Visual options
Compare standard and subtle emphasis across common action states.State ownership
LightButton uses Button’s state model and adds no state of its own. Your application supplies loading and disabled; emphasis only changes appearance. See Button’s state ownership example for managing an asynchronous action. There are no controlled and uncontrolled selection modes.
Emphasis and icons
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. Explicit child appearance takes precedence over the group, followed by
the component defaults. Subtle emphasis does not replace the 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. Set nativeButton={false} and role="link" for a navigation renderer.
Custom native buttons keep nativeButton true.
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.
"accent" | "danger" | "neutral" | "success"
Semantic color of the button.
boolean
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
"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
Destination URL. Renders a native anchor when
render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.boolean
Shows a loading indicator and disables activation.
"center" | "end" | "start"
Where the loading indicator appears.
center hides the content while preserving its layout space; start and end keep children and the opposite icon visible and replace the corresponding icon with the spinner.boolean
default:"true"
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in
href anchor defaults to false; an explicit value takes precedence.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use
nativeButton={false} and role="link" for a custom navigation anchor. Router integration belongs to the caller.AriaRole
Role of the root element. Use
link for custom navigation renderers.ShortcutDefinition
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
string
Localized text between sequence steps. Defaults to then.
"md" | "sm"
default:"sm"
Button height:
sm (24px) or md (32px). The link variant uses its content height at either size.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.
"ghost" | "link" | "outline" | "soft" | "solid"
default:"ghost"
Visual treatment of the button surface.
link uses compact text styling without a filled surface or border; render composition determines native semantics.