Link

Components

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'

<Link href="#">Sprout Social</Link>

Properties

Name	Type	Default	Description
`external`	`boolean`		Optional prop to make the URL open in a new tab
`children`	`React.ReactNode`
`href`	`string`		Setting this prop will cause the component to be rendered as a link
`disabled`	`boolean`		Disables user action and applies a disabled style to the component
`onClick`	`(e: React.SyntheticEvent<HTMLButtonElement>) => void`		Can be used in addition to an href but still renders as a link. Omitting href will render as button
`as`	`TypeStyledComponentsCommonProps["as"]`
`underline`	`boolean`	`true`
`qa`	`{ [key: string]: unknown }`	`{}`

Recipes

External link

External links that open in new tabs or windows should be accompanied with an arrow .

<Link href="https://sproutsocial.com" external>
	<Box display="flex" alignItems="center">
		Sprout Social
		<Icon
			ml={200}
			name="arrow-right-up-outline"
			role={undefined}
			svgProps={{role: 'img', 'aria-label': 'opens in a new tab'}}
		/>
	</Box>
</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 omit the href.

<Link onClick={() => alert('Clicked!')}>
  Primary Link
</Link>

Link inline with text

<Text fontSize={500}>
  Did you know that <Link href='#'>links can live inline with text</Link>?
</Text>

Underline override

<Box display='flex' alignItems='center' justifyContent='center'>
  <Link href="#" fontSize={200} underline={false}>No underline here!</Link>
</Box>

Decorative backgrounds

Links against a background that is decorative should use .

<Banner
	text={
		<Box
			width={1}
			display="flex"
			alignItems="center"
			justifyContent="space-between"
		>
			<Text>Banners use decorative backgrounds</Text>
			<Link external href="https://seeds.sproutsocial.com/components/link">
				Links use text.body
				<Icon
					ml={200}
					size="mini"
					name="arrow-right-up-solid"
					role={undefined}
					svgProps={{role: 'img', 'aria-label': 'opens in a new tab'}}
				/>
			</Link>
		</Box>
	}
/>

Link next to button

<Box display='flex' alignItems='center' justifyContent='center'>
  <Link href="#" mr={400} fontSize={200}>This is a link</Link>
  <Button appearance='primary'>Button</Button>
</Box>