Components
Link
This component is styled to resemble a hyperlink and semantically renders an anchor or button.
Under the hood, Link is an extension of the Text component. By default it will inherit its font size from its parent unless a size is set with the fontSize prop.
Properties
System props
System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
external | boolean | Optional prop to make an anchor open in a new tab | ||
children | ReactNode | Link content (accepted via string or components / DOM nodes) | ||
href | string | Optional URL, used when `Link` is rendered as an `<a />` | ||
disabled | boolean | Disables user action and applies disabled style on the `Link` | ||
onClick | signature | Action to perform when clicked (will cause the component to be rendered as a button instead of an anchor) | ||
as | Target | |||
qa | Object | {} | Customizable QA Object - for backwards compatibility |
Recipes
External link
Link as a button
In some cases, you may want the styling of a link but the ability to use a click handler. Passing a value for the onClick prop will cause the link to render as a button element.
Link inline with text
Did you know that links can live inline with text?
Link next to button