Tailwind CSS Link Components

The Link component is used for navigation between pages or to external sites. It is styled to look like traditional text but with interactive hover states and colors. You can add icons and underline effects. It is an essential building block for menus, footers, and inline body text navigation.

Basic Usage

<a class="link">Link</a>

Link Colors

Apply semantic link colors to match your theme or to convey meaning (such as using link-error for destructive actions or link-success for confirmation).

<a class="link link-primary">Primary link</a>
<a class="link link-secondary">Secondary link</a>
<a class="link link-accent">Accent link</a>
<a class="link link-success">Success link</a>
<a class="link link-info">Info link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>
<a class="link link-neutral">Neutral link</a>

Link Sizes

Scale your hyperlinks to match the surrounding typography. These utility classes range from extra small for footer "legal" text to 2X large for high-impact hero sections.

<a class="link link-xs">Primary link</a>
<a class="link link-sm">Secondary link</a>
<a class="link link-md">Accent link</a>
<a class="link link-lg">Success link</a>
<a class="link link-xl">Info link</a>
<a class="link link-2xl">Warning link</a>

Link Hover State

By default, you can choose to hide the underline and only reveal it on hover. This is a common design pattern for cleaner navigation menus and dashboard sidebars.

<a class="link link-hover">Hover this link</a>