Link

Links are a great way to direct users to a specific page or section of your website. The Link 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

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

Link within Text

You can seamlessly embed the Link component within text content.

Source

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

Link with Icon

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

Link Styled as Button

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

Source

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

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