Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt

Use this file to discover all available pages before exploring further.

​
Installation

npm install @zendeskgarden/react-buttons styled-components

import { Anchor } from '@zendeskgarden/react-buttons';

​
When to use

Use an Anchor:
  • To navigate from one page to another
  • To navigate within a page (hash links)
  • To display links alongside body text
Do not use an Anchor:
  • To prompt an action or submit data — use a Button instead
The distinction between Anchor and Button is semantic. An Anchor navigates — it changes the user’s location. A Button acts — it triggers a process or mutation. Choosing the right element ensures correct browser behavior and accessible semantics.

​
Usage

​
Default

Anchor is a styled <a> element. It accepts all standard anchor attributes, including href, target, and rel. 
import { Anchor } from '@zendeskgarden/react-buttons';

function Example() {
  return (
    <p>
      Read the{' '}
      <Anchor href="/components/introduction">components overview</Anchor>{' '}
      for installation instructions.
    </p>
  );
}

​
Danger

Danger styling communicates that navigating away from your current location will have destructive results — for example, a “cancel changes” link. 
<Anchor href="/discard" isDanger>
  Discard all changes
</Anchor>

​
External links

When linking to an external domain, set isExternal to automatically append an external-link icon and add target="_blank" and rel="noopener noreferrer" for security. 
<Anchor href="https://github.com/zendeskgarden" isExternal>
  View on GitHub
</Anchor>
isExternal automatically adds rel="noopener noreferrer", which prevents the new tab from gaining access to the opener page’s window object. You do not need to set this manually.

​
Hidden underline

Hide an anchor’s underline to reduce visual fatigue when multiple links are displayed close together (for example, in a navigation list). 
<Anchor href="/components/button" isUnderlined={false}>
  Button
</Anchor>

​
API

​
Anchor props

​
props.href
string
required
The URL the anchor navigates to.
​
props.isDanger
boolean
default:"false"
Applies danger styling to communicate destructive navigation.
​
props.isExternal
boolean
default:"false"
Appends an external-link icon and sets target="_blank" and rel="noopener noreferrer".
​
props.isUnderlined
boolean
default:"true"
Controls whether the anchor’s underline is visible.
​
props.target
string
Standard HTML anchor target attribute (e.g., '_blank').
​
props.rel
string
Standard HTML anchor rel attribute.