Components

Link

A link that starts bare and draws a thin neon underline out from its middle when the pointer or the keyboard reaches it.

The reveal

Hover one. Then press Tab and walk through them without the mouse - the line answers focus as well, because a link that only responds to a pointer is invisible to anyone who is not using one.

Installation Usage Design tokens

razor

<VetoLink Href="/docs/installation">Installation</VetoLink>

Three ways to underline

Reveal is the default. Always suits a link buried in a paragraph, where it has to be findable standing still. None is for a link whose surroundings already make it obvious.

Reveal Always None

razor

<VetoLink Href="/docs/usage" Underline="VetoUnderline.Reveal">Reveal</VetoLink>
<VetoLink Href="/docs/usage" Underline="VetoUnderline.Always">Always</VetoLink>
<VetoLink Href="/docs/usage" Underline="VetoUnderline.None">None</VetoLink>

Inside a paragraph

Inherit takes the colour of the surrounding text, so a link in the middle of a sentence does not turn a run of words into an accent-coloured stripe. The underline keeps its own colour.

Every Veto component styles itself from design tokens, which is how an app can rebrand the whole library by setting two or three custom properties rather than restyling anything.

razor

<p>
    Every Veto component styles itself from
    <VetoLink Href="/docs/theming/tokens" Inherit="true">design tokens</VetoLink>.
</p>

Colour

UnderlineColor sets the line and its halo. These three are set to Always so the colours are visible standing still; on a Reveal link the same colour arrives with the line.

Cyan Violet Amber

razor

<VetoLink Href="/docs/usage" UnderlineColor="#22d3ee" Underline="VetoUnderline.Always">Cyan</VetoLink>

As a navigation menu

VetoNavMenu takes the same option. The line belongs to the label but answers the whole row, so it appears wherever in the row the pointer crosses - and the current page is still marked the way it always was.

razor

<VetoNavMenu Items="NavItems" Underline="VetoUnderline.Reveal" Label="Example" />

Groups that take turns

Accordion keeps one group open at a time: opening one closes its siblings. An entry's Collapsed makes a group start closed. A group holding the current page stays open either way.

razor

<VetoNavMenu Items="_items" Accordion="true" />

@code {
    private readonly VetoNavEntry[] _items =
    [
        new() { Label = "Inputs", Children = [ ... ] },
        new() { Label = "Data", Collapsed = true, Children = [ ... ] }
    ];
}

Knowing where it is

The first of these points at the page you are reading. It carries aria-current and sets itself in a heavier weight, without anything on this page telling it to.

This page Some other page

razor

<VetoLink Href="/docs/components/link">This page</VetoLink>
<VetoLink Href="/docs/usage">Some other page</VetoLink>

Current page

A link knows whether it points at the page being shown. It marks itself with aria-current and a modifier class, matching on a path prefix so a link to /docs stays lit throughout the documentation. Set MatchExact on a link to the root, which every other path begins with.

The reveal is a flourish on top of the focus ring, not a replacement for it. The ring is still drawn, because an app is free to change the accent colour to something that does not stand out against its own background.

Parameters

Parameter	Type	Default	Description
`Href`	`string?`	`null`	Where the link goes.
`Underline`	`VetoUnderline`	`Reveal`	None, Reveal, or Always.
`UnderlineColor`	`string?`	`null`	Any CSS colour. Defaults to the theme accent.
`Inherit`	`bool`	`false`	Takes the surrounding text's colour instead of the accent.
`Target`	`string?`	`null`	The link's target. A new tab is given a safe rel automatically.
`Rel`	`string?`	`null`	Overrides that rel.
`MatchExact`	`bool`	`false`	Matches the current URL exactly rather than as a prefix.