Button

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

Variants

Button comes in several visual variants.

<Button>Default</Button>
<Button Variant="ButtonVariant.Secondary">Secondary</Button>
<Button Variant="ButtonVariant.Destructive">Destructive</Button>
<Button Variant="ButtonVariant.Outline">Outline</Button>
<Button Variant="ButtonVariant.Ghost">Ghost</Button>
<Button Variant="ButtonVariant.Link">Link</Button>

Sizes

Use the Size property to change button sizes.

<Button Size="ButtonSize.Sm">Small</Button>
<Button Size="ButtonSize.Default">Default</Button>
<Button Size="ButtonSize.Lg">Large</Button>
<Button Size="ButtonSize.Icon">...</Button>

Loading State

Show a loading spinner with the IsLoading property.

<Button IsLoading="true">Loading</Button>
<Button IsLoading="@isLoading" OnClick="HandleClick">
    @(isLoading ? "Please wait..." : "Click me")
</Button>

Disabled

Disable the button to prevent interaction.

<Button Disabled="true">Disabled</Button>
<Button Variant="ButtonVariant.Outline" Disabled="true">Disabled</Button>