Link

Tailwind CSS and Alpine JS Link

Links are a great way to direct users to a specific page or section of your website.

Default link

An example of a simple link.

<a href="#" class="">Read if bored</a>
<a href="#" class="">Read if bored</a>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Link within a text

Using the link component within a text.

Follow us on social media and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).

<p class="">Follow us on <a href="#" class="">social media</a> and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).</p>
<p class="">Follow us on <a href="#" class="">social media</a> and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).</p>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Link with icon

Using the link component within a text.

Find out more about our company

<p class="">Find out more <a href="#" class="">about our company
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true" stroke="currentColor" class="">
		<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
	</svg></a>
</p>
<p class="">Find out more <a href="#" class="">about our company
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true" stroke="currentColor" class="">
		<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
	</svg></a>
</p>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Button link

An example of a link that looks like a button.

<a href="#" class="" role="button">I'm a link</a>
<a href="#" class="" role="button">I'm a link</a>
@theme {
    /* light theme */
    --color-surface: var(--color-);
    --color-surface-alt: var(--color-);
    --color-on-surface: var(--color-);
    --color-on-surface-strong: var(--color-);
    --color-primary: var(--color-);
    --color-on-primary: var(--color-);
    --color-secondary: var(--color-);
    --color-on-secondary: var(--color-);
    --color-outline: ;
    --color-outline-strong: var(--color-);

    /* dark theme */
    --color-surface-dark: var(--color-);
    --color-surface-dark-alt: var(--color-);
    --color-on-surface-dark: var(--color-);
    --color-on-surface-dark-strong: var(--color-);
    --color-primary-dark: var(--color-);
    --color-on-primary-dark: var(--color-);
    --color-secondary-dark: var(--color-);
    --color-on-secondary-dark: var(--color-);
    --color-outline-dark: var(--color-);
    --color-outline-dark-strong: var(--color-);

    /* shared colors */
    --color-info: var(--color-);
    --color-on-info: var(--color-);
    --color-success: var(--color-);
    --color-on-success: var(--color-);
    --color-warning: var(--color-);
    --color-on-warning: var(--color-);
    --color-danger: var(--color-);
    --color-on-danger: var(--color-);

    /* border radius */
    --radius-radius: var(--radius);
}

Keyboard Navigation

Key Action
Tab Link gets the focus
Enter Focused link gets selected