# Button

Source: https://lumeo.nativ.sh/components/button

# Button

Displays a button or a component that looks like a button.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Variants

Default Secondary Destructive Outline Ghost Link

Preview Code

Sizes

Small Default Large

Preview Code

With Icon

Login with Email Please wait

Preview Code

Disabled

Disabled Disabled

Preview Code

Button Group

Preview Code

Loading State

Submit Save Draft

Preview Code

IsLoading

Submit Save

Always Loading

Preview Code

Press Effect

None Scale Brightness Ripple

Preview Code

Variant — interactive preview

Pick a variant to see it applied to the button below.

Default Secondary Destructive Outline Ghost Link

Button — Default

Preview Code

Size — interactive preview

Pick a size to see it applied live.

Sm Default Lg Icon

Button — Default

## 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 Default

Destructive Destructive

Outline Outline

Secondary Secondary

Ghost Ghost

Link Link

### ButtonSize

Default Default

Sm Sm

Lg Lg

Icon

### ButtonPressEffect

None None

Scale Scale

Brightness Brightness

Ripple Ripple

### IsLoading

IsLoading = false

Submit

IsLoading = true

Saving...

### FullWidth

FullWidth = false

Auto width

FullWidth = true

Full width

### Disabled

Disabled = false

Enabled

Disabled = true

Disabled

## 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](/components/toggle) — A two-state button for on/off actions like bold or mute.
-   [ToggleGroup](/components/toggle-group) — A group of toggles for selecting one or more options from a set.
-   [DropdownMenu](/components/dropdown-menu) — Use when a button needs to reveal a list of actions.