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.

import { Link } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
TYPOGRAPHY
Learn more
NameTypeDefaultDescriptionRequired?
externalboolean
Optional prop to make an anchor open in a new tab
childrenReactNode
Link content (accepted via string or components / DOM nodes)
hrefstring
Optional URL, used when `Link` is rendered as an `<a />`
disabledboolean
Disables user action and applies disabled style on the `Link`
onClicksignature
Action to perform when clicked (will cause the component to be rendered as a button instead of an anchor)
asTarget
qaObject{}
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
Link next to button