Anchor

  • Article

As defined by the W3C:

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.

fluent-anchor

fluent-anchor is a web component implementation of an HTML anchor element. The fluent-components anchor supports the same visual appearances as the button component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.

Setup

import {
    provideFluentDesignSystem,
    fluentAnchor
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentAnchor()
    );

Example

Note

fluent-anchor is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.

Additional Resources

Code in GitHub W3C Component Aria Practices

FluentAnchor

<FluentAnchor> wraps the <fluent-anchor> element, a web component implementation of an HTML anchor element leveraging the Fluent UI design system.

The <FluentAnchor> component supports the same visual appearances as the <FluentButton> component (accent, lightweight, neutral, outline, stealth) as well as a hypertext appearance for use inline with text.

Usage

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentAnchor Href="#">Anchor</FluentAnchor>

<h5>With target</h5>
<FluentAnchor Href="https://microsoft.com" target="_blank">Anchor</FluentAnchor>
<h4>Hypertext</h4>
<FluentAnchor Href="#" Appearance="Appearance.Hypertext">Anchor</FluentAnchor>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate,
    corrupti
    <FluentAnchor Appearance="Appearance.Hypertext" Href="#">doloremque totam</FluentAnchor>
    dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.
</p>

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

W3C Component Aria Practices