Skip to main content


As defined by the W3C:

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

fast-anchor is a web component implementation of an HTML anchor element. The fast-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.


import {    provideFASTDesignSystem,    fastAnchor} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastAnchor()    );


Live Editor
SyntaxError: Unexpected token (1:8)
1 : return ()

Create your own design#

import {    Anchor,    anchorTemplate as template,} from "@microsoft/fast-foundation";import { anchorStyles as styles } from "./my-anchor.styles";
export const myAnchor = Anchor.compose({    baseName: "anchor",    template,    styles,    shadowOptions: {        delegatesFocus: true,    },});

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

Additional resources#