RzLink

RzLinks are a great way to direct users to a specific page or section of your website. The RzLink component provides consistent styling for links throughout your application. It wraps an anchor element (<a>) with predefined RizzyUI styling using our design tokens and Tailwind CSS.

Default RzLink

The default link below uses the standard styling.

Source

<RzLink Href="#">Read if bored</RzLink>

RzLink within Text

You can seamlessly embed the RzLink component within text content.

Source

<p class="text-on-surface ">
    Follow us on <RzLink Href="#">social media</RzLink> and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).
</p>

RzLink with Icon

The RzLink component can include icons. In this example, a Blazicon (MdiIcon.ArrowRight) is appended after the link text.

Source

<p class="text-on-surface ">
    Find out more <RzLink Href="#">
        about our company
        <Blazicon Svg="MdiIcon.ArrowRight" class="size-4 inline" />
    </RzLink>
</p>

RzLink Styled as Button

The RzLink component accepts extra attributes via AdditionalAttributes. This lets you add extra styling classes to style the link like a button.

Source

<RzLink Href="#" 
      class="whitespace-nowrap rounded bg-primary border border-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75    dark:focus-visible:outline-primary-dark" 
      role="button">
    I'm a link
</RzLink>

RzLink Component Parameters

Property	Description
Href	string – The URL the link navigates to. Defaults to `#` if not provided.
ChildContent	RenderFragment – The content to be rendered inside the link. This may include text, icons, or other markup.