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
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
external | boolean | Optional prop to make the URL open in a new tab | ||
children | React.Node | |||
href | string | |||
disabled | boolean | Disables user action and applies a disabled style to the component | ||
onClick | (e: SyntheticEvent<HTMLButtonElement>) => void | Setting this prop will cause the component to be rendered as a button instead of an anchor) | ||
as | TypeStyledComponentsCommonProps"as" | |||
qa | Object | {} |
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. The link will render as a button element if you pass a value to the onClick prop and omit the href.
Link inline with text
Did you know that links can live inline with text?
Link next to button