Link

Usage

The link component is used to navigate users to other pages or external resources.

<LumexLink Href="#">Link</LumexLink>

Disabled

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

<LumexLink Href="#" Disabled="@true">Disabled Link</LumexLink>

Colors

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

<LumexLink Href="#" Color="@ThemeColor.None">None</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Default">Default</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Primary">Primary</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Secondary">Secondary</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Success">Success</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Warning">Warning</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Danger">Danger</LumexLink>
<LumexLink Href="#" Color="@ThemeColor.Info">Info</LumexLink>

Underline

You can control whether the link has an underline for emphasis or a cleaner look.

<LumexLink Href="#" Underline="@Underline.None">None</LumexLink>
<LumexLink Href="#" Underline="@Underline.Hover">Hover</LumexLink>
<LumexLink Href="#" Underline="@Underline.Always">Always</LumexLink>

External

The link component can be configured for external URLs, ensuring it opens in a new tab and behaves accordingly.

<LumexLink Href="https://github.com/LumexUI/lumexui"
           External="@true">
    External Link
</LumexLink>

Polymorphic

LumexUI components expose an As parameter that allows you to customize the HTML element tag used to render the component.

<LumexButton As="a"
             Color="@ThemeColor.Primary"
             href="https://github.com/LumexUI/lumexui">
    Button Link
</LumexButton>

Active State

Just like Blazor native NavLink component, this one also enables an active CSS class based on whether its href matches the current URL. Please refer to the official documentation for further information.

Custom Styles

You can customize the link component by passing any Tailwind CSS classes to the component's Class and/or Style parameters.

<LumexLink Color="@ThemeColor.Primary"
           Underline="@Underline.Always"
           Class="font-medium hover:decoration-2">
    Link
</LumexLink>

API

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

• <LumexLink />
• <LumexButton />