Button
Versatile button with variants, sizes, icons, and loading states.
Installation
Ships in the Lumeo package.
Already referenced? Just use it — or scaffold it standalone with the CLI:
lumeo add button
Examples
Pick a variant to see it applied to the button below.
Pick a size to see it applied live.
Keyboard
| Enter / Space | Activates the button. |
| Tab | Moves focus to the next focusable element. |
Related
- Toggle — a two-state button for on/off actions.
- Toggle Group — pick one or more from a set of toggles.
- Dropdown Menu — when a button reveals a list of actions.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The button's label content. Hidden in favor of LoadingText while IsLoading is true (unless LoadingText is null). |
| LeftIcon | RenderFragment? | — | Icon rendered before ChildContent. Hidden while IsLoading is true (replaced by the spinner). |
| RightIcon | RenderFragment? | — | Icon rendered after ChildContent. Still shown while IsLoading is true. |
| Variant | ButtonVariant | ButtonVariant.Default | Visual style. Defaults to Default (solid primary color). |
| Size | ButtonSize | ButtonSize.Default | Button height/padding. Defaults to Default. Combines with Density to pick the final height. |
| Density | Density? | — | Per-button density override. When null, the button inherits from any ancestor DensityScope; if neither is set, behaviour matches the historical Comfortable default. Only padding / row-height shifts between values — text size + radius are governed by Size. |
| FullWidth | bool | false | When true, the button stretches to fill its container's width (w-full). Default is false. |
| Class | string? | — | Additional CSS classes merged onto the root button/anchor element. |
| Disabled | bool | false | Disables the button. On the <a> render path (see Href) this maps to aria-disabled plus non-interactive styling instead of a native disabled attribute. |
| IsLoading | bool | false | When true, shows a spinner in place of LeftIcon and disables interaction (pointer-events-none), without visually dimming like Disabled. |
| LoadingText | string? | — | Text shown next to the spinner while IsLoading is true. When null, ChildContent stays visible alongside the spinner instead. |
| Href | string? | — | When set, the button renders as an <a href> styled exactly like a button — the Blazor-idiomatic polymorphism for the common "link that looks like a button" case (#269). All visual props (Variant/Size/icons) still apply; Disabled/IsLoading map to aria-disabled + non-interactive styling since a link can't be natively disabled. Leave null for a normal <button>. |
| Type | ButtonType | ButtonType.Button | HTML button type. Defaults to Button — explicitly NOT submit. The HTML spec says <button> inside <form> defaults to type="submit", which would submit the form on every click. Lumeo defaults to a regular button so Buttons don't silently submit EditForm; opt in via Type="Submit". |
| StopPropagation | bool | false | Stop click propagation to ancestors. Use this instead of the Razor directive @@onclick:stopPropagation on a Lumeo component — that directive creates an onclick parameter that case-insensitively collides with the OnClick parameter, producing a compile error. The directive only works natively on HTML elements; this parameter is the equivalent for the <button> element underneath. |
| PreventDefault | bool | false | Prevent the default click action on the underlying <button> element. Same rationale as StopPropagation — Razor's @@onclick:preventDefault directive collides case-insensitively with the OnClick parameter on components. |
| PressEffect | ButtonPressEffect | ButtonPressEffect.None | Visual feedback when the button is pressed down. Default is None (no press animation — original behaviour). |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root button/anchor element. |
Events
| OnClick | EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs> | Invoked on click, after any cascaded trigger's own activation (Popover/Dropdown/Dialog AsChild) has run. |