Anchor

Examples

A text link. We have a separate component from the browser base so we can style it. You can either set the icon and/or label properties or just use children.

Properties

a11yTitle {string}
Accessibility title.
align {start|center|end}
Text alignment.
animateIcon {true|false}
Whether to animate the icon on hover. The default is true.
disabled {true|false}
Whether to disable the anchor. The default is false.
href {string}
Hyperlink reference to place in the anchor. If `path` prop is provided, `href` prop will be ignored.
icon {element}
Icon element to place in the anchor. See Icon.
id {string}
Anchor identifier.
label {node}
Label text to place in the anchor.
method {push|replace}
Valid only when used with path. Indicates whether the browser history should be appended to or replaced. The default is push.
onClick {function}
Click handler.
path {object|string}
React-router path to navigate to when clicked. Use path={{ path: '/', index: true }} if you want the Anchor to be active only when the index route is current.
primary {true|false}
Whether this is a primary anchor. The default is false.
reverse {true|false}
Whether an icon and label should be reversed so that the icon is at the end of the anchor. The default is false.
tag {string}
The DOM tag to use for the element. The default is <a>. This should be used in conjunction with components like Link from React Router. In this case, Link controls the navigation while Anchor controls the styling. The default is a.
target {string}
Target of the link.