Link | Mineral UI

The Link component creates a hyperlink to external pages, files, anchors on the same page, or another URL.

Examples #

Import Syntax #

import Link from 'mineral-ui/Link';

Basic Usage #

Use the Link component to ensure that anchors are consistently styled with the rest of your app. Links inherit font size, weight, and family from context; colors are inherited from the theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

<DemoLayout>
  <Big>
    Lorem ipsum dolor sit amet, <Link href="http://example.com">consectetur</Link> adipiscing elit,
  </Big>

  <Small>
    sed do eiusmod tempor <Link href="http://example.com">incididunt</Link> ut labore et dolore magna aliqua.
  </Small>

  <Bold>
    Ut enim <Link href="http://example.com">ad minim veniam</Link> quis nostrud exercitation
  </Bold>

  <Serif>
    ullamco laboris <Link href="http://example.com">nisi ut</Link> aliquip ex ea commodo consequat.
  </Serif>
</DemoLayout>

Children #

A Link will render any children.

<Link href="http://example.com">
  <img alt="gradient placeholder" src="/images/125x125.png" />
</Link>

Variants #

Style Links with these variants to help communicate purpose.

Default Danger Success Warning

<DemoLayout>
  <Link href="http://example.com">Default</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>

Button #

Use the Button component to create a link with Button styling.

Link

<Button as="a" href="#button">Link</Button>

Other Components #

Any component that generate an <a /> element may be styled using the as prop, such as a ReactRouter Link.

ReactRouter Link

<DemoLayout>
  <BrowserRouter>
    <Link as={ReactRouterLink} to="/components/link">ReactRouter Link</Link>
  </BrowserRouter>
</DemoLayout>

API & Theme #

Link Props #

The Link component takes the following React props.

Name	Type	Description
children	React$Node	Content of the Link
href	string	A URL or URL fragment to which the Link points
variant	'danger' \| 'success' \| 'warning'	Available variants

Undocumented properties, including as and css, 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 local or global 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_theme_focus
Link_color	theme.color_theme
Link_color_active	theme.color_theme_active
Link_color_hover	theme.color_theme_hover
Link_color_focus	theme.color_theme_focus

Usage #

When/How to Use #

Links should be used when the browser location will change. Links should be clear about where the user will navigate. Avoid using "click here" or similar for Link content.

If you need a minimally styled Button, use <Button minimal>Example</Button>.

Best Practices #

Links can be used inline to navigate to other content or pages.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. Donec vulputate interdum sollicitudin.

Don't use a Link to perform a page action. To represent an action, use a Button.

Scroll to bottom