Skip to main content
Version: 1.x

fast-anchor

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.

Setup

import {
provideFASTDesignSystem,
fastAnchor
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastAnchor()
);

Usage

Live Editor
<fast-anchor href="https://fast.design" appearance="hypertext">FAST</fast-anchor>
Result
Loading...

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,
},
});
note

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

API

class: Anchor

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
downloadpublicstringPrompts the user to save the linked URL. See <a> element for more information.
hrefpublicstringThe URL the hyperlink references. See <a> element for more information.
hreflangpublicstringHints at the language of the referenced resource. See <a> element for more information.
pingpublicstringSee <a> element for more information.
referrerpolicypublicstringSee <a> element for more information.
relpublicstringSee <a> element for more information.
targetpublic"_self" or "_blank" or "_parent" or "_top"See <a> element for more information.
typepublicstringSee <a> element for more information.
controlpublicHTMLAnchorElementReferences the root element
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
downloaddownload
hrefhref
hreflanghreflang
pingping
referrerpolicyreferrerpolicy
relrel
targettarget
typetype

CSS Parts

NameDescription
controlThe anchor element
contentThe element wrapping anchor content

Slots

NameDescription
startContent which can be provided before the anchor content
endContent which can be provided after the anchor content
The default slot for anchor content

Fields

NamePrivacyTypeDefaultDescriptionInherited From
ariaExpandedpublic"true" or "false" or string or nullSee https://www.w3.org/WAI/PF/aria/roles#link for more information

Attributes

NameFieldInherited From
aria-expandedariaExpanded

Additional resources