Typography

TwLink

TwLink renders an accessible anchor that follows the theme's primary colour by default, with optional semantic colours, neutral tones and typography sizes.

Last updated 26 October 2026

Basic usage

Set Href and put the link text in ChildContent. With no custom class, a link uses the theme's primary text colour and the default underline treatment from TwLinkTheme.

Read the twblazor documentation for guides and examples.

RAZOR

<p class="text-sm">
    Read the <TwLink Href="https://twblazor.com" Color="Color.Primary" Class="underline">twblazor documentation</TwLink> for guides and examples.
</p>

Colour and tone

Set Color for a semantic theme colour, or Tone for a neutral text token. An explicit colour or tone is applied even when you also set a custom class.

Primary link Danger link Secondary neutral link Muted neutral link Inherits the surrounding colour

RAZOR

<TwFlex Direction="FlexDirection.Col" Gap="1">
    <TwLink Href="#">Primary link</TwLink>
    <TwLink Href="#" Color="Color.Danger">Danger link</TwLink>
    <TwLink Href="#" Tone="TextTone.Secondary">Secondary neutral link</TwLink>
    <TwLink Href="#" Tone="TextTone.Muted">Muted neutral link</TwLink>
    <TwLink Href="#" Tone="TextTone.Inherit" Class="text-sm">Inherits the surrounding colour</TwLink>
</TwFlex>

Size, weight and truncation

Size and Weight use the shared typography scales. Truncate cuts overflowing link text with an ellipsis.

Large semibold link Small secondary link A long link label that is truncated when it no longer fits

RAZOR

<TwFlex Direction="FlexDirection.Col" Gap="1">
    <TwLink Href="#" Size="TextSize.Lg" Weight="TextWeight.Semibold">Large semibold link</TwLink>
    <TwLink Href="#" Size="TextSize.Sm" Tone="TextTone.Secondary">Small secondary link</TwLink>
    <TwLink Href="#" Truncate Class="block max-w-48">A long link label that is truncated when it no longer fits</TwLink>
</TwFlex>

Opening a new tab

Set Target="_blank" to open a link in a new tab. The component adds rel="noopener" and tells assistive technology that the link opens a new tab. Set Rel yourself to override the default.

Open the twblazor repository

RAZOR

<TwLink Href="https://github.com/twblazor/twblazor" Target="_blank">Open the twblazor repository</TwLink>

Custom styling

A custom Class replaces the default link treatment, which is useful inside a button or a card. The focus ring is kept so keyboard users can still see where they are; set Color to keep a theme colour alongside your own classes.

A custom-styled link

RAZOR

<TwLink Href="https://twblazor.com" Color="Color.Primary" Class="font-semibold underline underline-offset-4">
    A custom-styled link
</TwLink>

A link is a native anchor, so it is one Tab stop and follows its Href with Enter. A link that opens a new tab says so to screen readers.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves focus to the link.
`Enter`	Follows the link.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwLinkTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Default`	string

Full reference: TwLinkTheme on the API docs.

TwLink

Basic usage

Colour and tone

Size, weight and truncation

Opening a new tab

Custom styling

Keyboard navigation

Theme configuration