Link
Link makes text interactive so customers can perform an action, such as navigating to another location.
Anchor to linkpropsLinkProps
A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
ID of a component that should respond to activations (e.g. clicks) on this pressable.
See for how to control the behavior of the target.
Specify the color of the link. monochrome will take the color of its parent.
Open the link in a new window or tab. If the link points to a domain other than your Storefront, it will always open in a new tab.
Unique identifier.
Typically used as a target for another component’s controls to associate an accessible label with an action.
Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)
Callback when pressed. If to is set, it will execute the callback and then navigate to the location specified by to.
An overlay component to render when the user interacts with the component.
Destination to navigate to. You must provide either this property, , or both.
The component's identifier whose visibility will be toggled when this component is actioned.
Basic Link
Preview
Anchor to appearanceAppearance
| Value | Description |
|---|---|
"monochrome" | Takes the color of its parent. |
Anchor to best-practicesBest Practices
If the link isn’t in a paragraph, then consider using a plain button instead for a larger hit area.
Use links primarily for navigation and use buttons primarily for actions.
The HTML that renders for the Button and
Linkcomponents includes style and accessibility information. Use these components intentionally and consistently to provide a more inclusive experience for assistive technology users and a more cohesive visual experience for sighted users.
