Anchor

A text link, internal or external.

JavaScript off: what the HTML and CSS do on their own.

A text link in the accent color. External opens it in a new tab, with an icon and a note for screen readers.

Usage

razor

Read the <Anchor Href="/docs">docs</Anchor>.
<Anchor Href="https://github.com/..." External>GitHub</Anchor>

Internal and external links

Use External to open a link in a new tab, with an icon and a note for screen readers.

Preview Code

Preview

Read the install guide before you begin.

The source is on GitHub (opens in a new tab).

Code

NewTab.razor

<Stack Gap="3" Grow>
    <TextBlock>Read the <Anchor Href="docs/get-started/blazor-web-app">install guide</Anchor> before you begin.</TextBlock>
    <TextBlock>The source is on <Anchor Href="https://github.com/enabledevmode/izzyblazor" External>GitHub</Anchor>.</TextBlock>
</Stack>

Underline and color

Use Underline for links whose place already says "link", and Inherit to take the color of the text around it.

Preview Code

Preview

Always On hover None

Prices exclude tax. See the billing terms for details.

Code

LinkStyles.razor

<Stack Gap="3" Grow>
    <Row Gap="6" Wrap>
        <Anchor Href="docs/components">Always</Anchor>
        <Anchor Href="docs/components" Underline="AnchorUnderline.Hover">On hover</Anchor>
        <Anchor Href="docs/components" Underline="AnchorUnderline.None">None</Anchor>
    </Row>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">
        Prices exclude tax. See the <Anchor Href="docs/components" Inherit>billing terms</Anchor> for details.
    </TextBlock>
</Stack>

Mode support

What works in each mode, Anchor
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a native a with an href, so Enter and focus work as the browser defines them.
The link text is its name, so write text that makes sense on its own, not "Click here".
An external link says it opens a new tab (NewTabLabel), even with HideExternalIcon.
AnchorUnderline.Hover and AnchorUnderline.None leave only color to mark the link in text; keep them for links whose place says "link", such as a nav.

Parameters

Anchor parameters
Prop	Type	Default
`Href`Where it goes.	`string`	Required
`External`Opens in a new tab (target="_blank" rel="noopener noreferrer"), with an icon after the text.	`bool`	`false`
`HideExternalIcon`Leaves out an external link's icon, for repeated links where it would be noise (a list of lessons, say).	`bool`	`false`
`Underline`When it's underlined.	`AnchorUnderline`	`AnchorUnderline.Always`
`Inherit`Uses the surrounding text color instead of the accent, still underlined, for links in muted text or on colored backgrounds.	`bool`	`false`
`NewTabLabel`Read to screen readers after an external link's text.	`string?`	`"(opens in a new tab)"`
`ChildContent`The link text.	`RenderFragment?`

Plus 16 item props and 4 common props.

Full API