The button component provides a simple and intuitive way to add clickable elements.
<LumexButton Color="@ThemeColor.Primary">Button</LumexButton>
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>
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>
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>
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>
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>
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.
@using LumexUI.Shared.Icons
<LumexButton Color="@ThemeColor.Success">
<ChildContent>Take a photo</ChildContent>
<EndContent>
<CameraIcon />
</EndContent>
</LumexButton>
<LumexButton Color="@ThemeColor.Danger"
Variant="@Variant.Flat">
<StartContent>
<UserIcon />
</StartContent>
<ChildContent>Delete user</ChildContent>
</LumexButton>
You can also display a button without text by passing the IconOnly
parameter and the desired icon as ChildContent.
@using LumexUI.Shared.Icons
<div class="flex items-center gap-4">
<LumexButton IconOnly="@true" Color="@ThemeColor.Danger">
<HeartIcon />
</LumexButton>
<LumexButton IconOnly="@true" Color="@ThemeColor.Warning">
<CameraIcon />
</LumexButton>
</div>
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>
See the API references below for a complete guide to all the
parameters available for the components mentioned here.