BlazorUI Demo

Button

Buttons express actions with consistent size, colour, tone, state and icon conventions.

Variants and colours

Use semantic colours for intent and palette colours for visual grouping.

View code 
<BuiStack Orientation="Orientation.Horizontal" Wrap Gap="2">
    <BuiButton Variant="Variant.Filled">Filled</BuiButton>
    <BuiButton Variant="Variant.Soft" Color="Colors.Success">Soft</BuiButton>
    <BuiButton Variant="Variant.Outlined" Color="Colors.Error">Outlined</BuiButton>
    <BuiButton Variant="Variant.Ghost" Color="Palette.Violet">Ghost</BuiButton>
    <BuiButton Variant="Variant.Text">Text</BuiButton>
</BuiStack>
Sizes, icons and states
View code 
<BuiStack Orientation="Orientation.Horizontal" Align="Align.Center" Wrap Gap="2">
    <BuiButton Size="Size.Small">Small</BuiButton>
    <BuiButton StartIcon="LucideIcons.Save" OnClick="SaveAsync">Save</BuiButton>
    <BuiButton Size="Size.Large" EndIcon="LucideIcons.ArrowRight">Continue</BuiButton>
    <BuiButton Loading>Saving</BuiButton>
    <BuiButton Disabled>Disabled</BuiButton>
</BuiStack>

@code {
    private Task SaveAsync() => Task.CompletedTask;
}