Link

Links 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 Link

The default link below uses the standard styling.

Source

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

Link within Text

You can seamlessly embed the RzLink component within text content.

Source

<p class="text-foreground ">
    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>

Link 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-foreground ">
    Find out more <RzLink Href="#">
        about our company
        <Blazicon Svg="MdiIcon.ArrowRight" class="size-4 inline" />
    </RzLink>
</p>

Link 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-primary-foreground 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	Type	Default
`Href`	`string` – The URL the link navigates to.	`string`	`"#"`
`Underline`	`bool` – Determines whether the link should be underlined on hover and focus.	`bool`	`true`
`ChildContent`	`RenderFragment?` – The content to be rendered inside the link. This may include text, icons, or other markup.	`RenderFragment?`	`null`