Button - LumexUI

Usage

The button component provides a simple and intuitive way to add clickable elements.

<LumexButton Color="@ThemeColor.Primary">Button</LumexButton>

Disabled

You can disable a button to prevent user interaction. A disabled button is faded and does not respond to user clicks.

<LumexButton Color="@ThemeColor.Primary"
             Disabled="@true">
    Disabled
</LumexButton>

Sizes

Several button sizes are offered to accommodate different use cases, from small buttons for compact UIs to large buttons for more prominent actions.

<LumexButton Size="@Size.Small">Small</LumexButton>
<LumexButton Size="@Size.Medium">Medium</LumexButton>
<LumexButton Size="@Size.Large">Large</LumexButton>

Radius

The button component supports various border radius options, allowing you to create buttons with rounded corners or sharp edges.

<LumexButton Radius="@Radius.None">None</LumexButton>
<LumexButton Radius="@Radius.Small">Small</LumexButton>
<LumexButton Radius="@Radius.Medium">Medium</LumexButton>
<LumexButton Radius="@Radius.Large">Large</LumexButton>

Colors

Customize the appearance of the button by applying different colors that suit your application's theme and design.

<LumexButton Color="@ThemeColor.Default">Default</LumexButton>
<LumexButton Color="@ThemeColor.Primary">Primary</LumexButton>
<LumexButton Color="@ThemeColor.Secondary">Secondary</LumexButton>
<LumexButton Color="@ThemeColor.Success">Success</LumexButton>
<LumexButton Color="@ThemeColor.Warning">Warning</LumexButton>
<LumexButton Color="@ThemeColor.Danger">Danger</LumexButton>
<LumexButton Color="@ThemeColor.Info">Info</LumexButton>

Variants

Multiple button variants are supported, including solid, outlined, shadow and more, to suit different design needs.

<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Solid">Solid</LumexButton>
<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Outlined">Outlined</LumexButton>
<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Flat">Flat</LumexButton>
<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Shadow">Shadow</LumexButton>
<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Ghost">Ghost</LumexButton>
<LumexButton Color="@ThemeColor.Primary" Variant="@Variant.Light">Light</LumexButton>

Icons

You can enhance your buttons by including icons. Icons can be positioned on the start or end of the button text for better visual context.

<LumexButton Color="@ThemeColor.Primary"
             StartContent="@StartContent">
    Share
</LumexButton>
<LumexButton Color="@ThemeColor.Danger"
             Variant="@Variant.Ghost"
             EndContent="@EndContent">
    Cancel
</LumexButton>

@code {
    private RenderFragment StartContent => @<LumexIcon Icon="@Icons.Rounded.Share" />;
    private RenderFragment EndContent => @<LumexIcon Icon="@Icons.Rounded.Cancel" />;
}

Custom Styles

You can customize the button component by passing any Tailwind CSS classes to the component's Class parameter.

<LumexButton Class="bg-gradient-to-r from-violet-500 to-fuchsia-500 text-white rounded-full">
    Button
</LumexButton>

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

On this page