Anchor
The Anchor is a link that helps users navigate from one location to another.
Used for this
- To navigate from one page to another
- To navigate within a page
- To display links alongside text
Not for this
- To prompt an action or submit data, use a Button instead
How to use it
Default
The Anchor component is a styled <a> tag. It accepts all standard anchor attributes and
signals a way to navigate.
Danger
Danger styling communicates that navigating away from your current location will have destructive results.
External anchor
An icon appended to the end of an Anchor signals that the link will open in a new window or tab.
Hidden underline
Hide an anchor’s underline to reduce visual fatigue when multiple are displayed.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-buttons
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Anchor } from '@zendeskgarden/react-buttons'
API
Anchor
Extends AnchorHTMLAttributes<HTMLAnchorElement>
The Anchor component applies appropriate attributes, icon, and styles based on the props provided.
| Prop name | Type | Default | Description |
|---|---|---|---|
externalIconLabel | string | Allows a customized/translated text label to be passed to the external link icon, making that icon accessible to assistive technology | |
isDanger | boolean | Applies danger styling | |
isExternal | boolean | Attaches target="_blank" and rel="noopener noreferrer" to an anchor that navigates to an external resource. This ensures that the anchor is a safe cross-origin destination link. | |
isUnderlined | boolean | true | Determines if the anchor has underline styling |