Usage
The link component is used to navigate users to other pages or external resources.
Disabled
You can disable a link to prevent user interaction. A disabled link is faded and does not respond to user clicks.
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>
The above is an attempt to replicate the polymorphic components from React.
However, in Blazor, we can only control the HTML element tag of the rendered component.
For example, to make the button link open in a new tab,
you must manually define the `target` and `rel` attributes.
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.