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

NameTypeDefaultDescriptionRequired?
externalboolean
Optional prop to make the URL open in a new tab
childrenReact.Node
hrefstring
disabledboolean
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"
qaObject{}

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