Button
Displays a button or a component that looks like a button.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Button />
When to Use
- Trigger primary actions such as form submissions, confirmations, or saving data.
- Navigate users to a new page or section when styled as a link variant.
- Provide call-to-action elements in hero sections, cards, or toolbars.
Pick a variant to see it applied to the button below.
Pick a size to see it applied live.
Keyboard Interactions
| Key | Action |
|---|---|
| Enter | Activates the button. |
| Space | Activates the button. |
| Tab | Moves focus to the next focusable element. |
Parameter Coverage
Every value of every public enum / bool parameter rendered live, so you can scan the full surface at a glance.
ButtonVariant
Default
Destructive
Outline
Secondary
Ghost
Link
ButtonSize
Default
Sm
Lg
Icon
ButtonPressEffect
None
Scale
Brightness
Ripple
IsLoading
IsLoading = false
IsLoading = true
FullWidth
FullWidth = false
FullWidth = true
Disabled
Disabled = false
Disabled = true
API Reference
Button
| Property | Type | Default | Description |
|---|---|---|---|
| Variant | ButtonVariant | Default | Visual style of the button. Values: Default, Destructive, Outline, Secondary, Ghost, Link. |
| Size | ButtonSize | Default | Size of the button. Values: Default, Sm, Lg, Icon. |
| OnClick | EventCallback<MouseEventArgs> | — | Callback invoked when the button is clicked. |
| IsLoading | bool | false | Shows a loading spinner and disables the button. |
| LoadingText | string? | — | Text to display while loading instead of children. |
| PressEffect | ButtonPressEffect | None | Visual feedback while pressed. Values: None, Scale, Brightness, Ripple. Respects prefers-reduced-motion. |
| Disabled | bool | false | Disables user interaction and dims the button. |
| FullWidth | bool | false | Stretches the button to fill its container's width. |
| LeftIcon | RenderFragment? | null | Slot rendered before the button label. |
| RightIcon | RenderFragment? | null | Slot rendered after the button label. |
| Type | ButtonType | Button | HTML button type attribute. Values: Button, Submit, Reset. Defaults to Button to prevent accidental form submission. |
| StopPropagation | bool | false | When true, stops the click event from bubbling up to parent elements. |
| PreventDefault | bool | false | When true, prevents the default browser action on click (e.g. link navigation). |
| ChildContent | RenderFragment? | null | Content rendered inside the button. |
Related Components
- Toggle — A two-state button for on/off actions like bold or mute.
- ToggleGroup — A group of toggles for selecting one or more options from a set.
- DropdownMenu — Use when a button needs to reveal a list of actions.