Link

The Link component creates a hyperlink to another URL. A brief, introductory couple of sentences about the component. This is a second sentence just so that there’s a second line in this document. Think of this a teaser for the When/How to Use section.

Examples #

Basic link #

Links inherit font size, weight, and family. Slightly longer text to explain what’s so special about this particular example.

Light years star stuff harvesting star light

citizens of distant epochs encyclopaedia galactica

vastness is bearable only through love,

shores of the cosmic ocean!

<div>
	<Big>
		Light years star stuff <Link href="http://example.com">harvesting</Link> star light
	</Big>

	<Small>
		citizens of distant <Link href="http://example.com">epochs</Link> encyclopaedia galactica
	</Small>

	<Bold>
		vastness is <Link href="http://example.com">bearable</Link> only through love,
	</Bold>

	<Serif>
		shores of the <Link href="http://example.com">cosmic</Link> ocean!
	</Serif>
</div>

Children #

A Link will render any children. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

<Link href="http://example.com">
	<img alt="a headshot of Bill Murray" src="https://www.fillmurray.com/100/100" />
</Link>

Variants #

Links can be styled as these variants, to help communicate purpose. Text to explain what’s special about this example.

Regular Danger Success Warning

<DemoLayout>
	<Link href="http://example.com">Regular</Link>
	<Link variant="danger" href="http://example.com">Danger</Link>
	<Link variant="success" href="http://example.com">Success</Link>
	<Link variant="warning" href="http://example.com">Warning</Link>
</DemoLayout>

ReactRouter #

This example passes a ReactRouter Link to a Mineral UI Link's element prop in order to apply Mineral UI styles and achieve client side routing. Slightly longer text to explain what’s so special about this particular example.

Page 2

<BrowserRouter>
	<Switch>
		<Route
			path="/components/:componentId/:path?"
			render={route => {
				const path = route.match.params.path;

				if ('page-2' === path) {
					return <Link to="/components/link/page-1" replace element={ReactRouterLink}>Page 1</Link>;
				}
				return <Link to="/components/link/page-2" replace element={ReactRouterLink}>Page 2</Link>;
			}}
		/>
		<Redirect from="/" to="/components/link" />
	</Switch>
</BrowserRouter>

Link Props #

Name	Type	Default	Description
children	MnrlReactNode		Content of the Link
element	$FlowFixMe	'a'	Element to be used as the root node - e.g. "a" or { ReactRouterLink }
href	string		A URL or a URL fragment that the link points to
variant	'regular', 'danger', 'success', 'warning'	'regular'	Available variants

Undocumented properties will be applied to the root element.

Link Theme Variables #

These variables can be used as hooks to override this component’s style at either a global or local level. The theme referenced below is whatever theme is available from props to the instance of this component.

Variable	Value
Link_borderColor_focus	theme.borderColor_focus
Link_color	theme.color_text_primary
Link_color_active	theme.color_text_primary_active
Link_color_hover	theme.color_text_primary_hover
Link_color_focus	theme.color_text_primary_focus

When/How to Use #

An explanation of when to use this component and basics about how to use it. Could also include when not to use this component, and which component should be used instead. More detailed how-to-use info is under Best Practices, below. It might be a couple of short sentences, or it could be a full paragraph or two.

Best Practices #

DO this practice

Example Link Component

Some text to explain why you should do this and when.

DON’T do this other practice

Example Link Component

Some text to explain why you should not do this.

DO this other practice

Some text to explain why you should do this and when.

DO this third practice

Example Link Component

Some text to explain why you should do this and when.

We welcome feedback and contributions on GitHub