Link

yarn add @clayui/link

React Component
CSS / Markup

Stable3.0.2

Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.

Take a look at our Storybook for more information about this component.

Check the Lexicon Links Pattern for a more in-depth look at the motivations and proper usage of this component.

By default, when using ClayLink your component will be rendered as an anchor.

You can style a link just passing displayType property to value secondary or primary.

Default Secondary With Aria Label

import ClayLink from '@clayui/link';
import React from 'react';

import ClayLink from '@clayui/link';
import React from 'react';

const Component = () => {
  return (
    <div className="row">
      <ClayLink href="#link-styles">{"Default"}</ClayLink>

      <ClayLink displayType="secondary" href="#link-styles">
        {"Secondary"}
      </ClayLink>

      <ClayLink aria-label="My Link" href="#link-styles">
        {"With Aria Label"}
      </ClayLink>
    </div>
  );
};

render(<Component />);

const Component = () => {
  return (
    <div className="row">
      <ClayLink href="#link-styles">{"Default"}</ClayLink>
      <ClayLink displayType="secondary" href="#link-styles">
        {"Secondary"}
      </ClayLink>
      <ClayLink aria-label="My Link" href="#link-styles">
        {"With Aria Label"}
      </ClayLink>
    </div>
  );
};
render(<Component />);

Additionally, if you want to customize every Link component in your app, you are able to do so by using <ClayLinkContext.Provider />.

Click me

import ClayLink, {ClayLinkContext} from '@clayui/link';
import React from 'react';

import ClayLink, {ClayLinkContext} from '@clayui/link';
import React from 'react';

const Component = () => {
  const ConfirmBeforeNavigate = ({ children, href, ...otherProps }) => (
    <a
      {...otherProps}
      href={href}
      onClick={e =>
        window.confirm("r u sure?") ? undefined : e.preventDefault()
      }
    >
      {children}
    </a>
  );

  return (
    <ClayLinkContext.Provider value={ConfirmBeforeNavigate}>
      <div>
        <ClayLink href="#">Click me</ClayLink>
      </div>
    </ClayLinkContext.Provider>
  );
};

render(<Component />);

const Component = () => {
  const ConfirmBeforeNavigate = ({ children, href, ...otherProps }) => (
    <a
      {...otherProps}
      href={href}
      onClick={e =>
        window.confirm("r u sure?") ? undefined : e.preventDefault()
      }
    >
      {children}
    </a>
  );
  return (
    <ClayLinkContext.Provider value={ConfirmBeforeNavigate}>
      <div>
        <ClayLink href="#">Click me</ClayLink>
      </div>
    </ClayLinkContext.Provider>
  );
};
render(<Component />);

API

None.

Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.

Styles
Single Link
Component Links
Component Action
- Anchor
- Button
Outline
Outline Borderless
External Link
Monospaced
Title Link

Check the Lexicon Links Pattern for a more in-depth look at the motivations and proper usage of this component.

See the implementation of the Links component in React following the Lexicon Links Pattern.

Don't forget to check WAI-ARIA accessibility pratices for links when writting your markup.

These elements should be used to style links based on the global link, primary, and secondary colors.

Styles

Regular Anchor Tag

.link-primary

.link-secondary

<div><a href="#1">Regular Anchor Tag</a></div>
<div><a class="link-primary" href="#1">.link-primary</a></div>
<div><a class="link-secondary" href="#1">.link-secondary</a></div>

Single Link

Use .single-link on an anchor to add a semi-bold style to the link and should be used for standalone links defined by https://liferay.design/lexicon/core-components/link/.

.link-primary.single-link .link-secondary.single-link

<a class="link-primary single-link" href="#1">.link-primary.single-link</a>
<a class="link-secondary single-link" href="#1">.link-secondary.single-link</a>

Component Links

Use these patterns for links, titles, subtitles in components.

The colors, sizing, and other CSS Properties can change for these items depending on the component you put them in (requires custom CSS).

.component-link

.component-title

.component-title a

.component-subtitle

.component-subtitle a

<a class="component-link" href="#1">.component-link</a>
<h4 class="component-title">.component-title</h4>
<h4 class="component-title"><a href="#1">.component-title a</a></h4>
<p class="component-subtitle">.component-subtitle</p>
<p class="component-subtitle"><a href="#1">.component-subtitle a</a></p>

Component Action

Use these patterns for actions in components.

Anchor

<a class="component-action" href="#1" role="button">
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</a>
<a
	class="component-action disabled"
	href="#disabled"
	role="button"
	tabindex="-1"
>
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</a>

Button

<button class="component-action" role="button">
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>
<button class="component-action" disabled type="button" tabindex="-1">
	<svg
		class="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>

Outline

Primary Secondary

<a class="link-outline link-outline-primary" href="#1">Primary</a>
<a class="link-outline link-outline-secondary" href="#1">Secondary</a>

Outline Borderless

Primary Secondary

<a class="link-outline link-outline-borderless link-outline-primary" href="#1"
	>Primary</a
>
<a class="link-outline link-outline-borderless link-outline-secondary" href="#1"
	>Secondary</a
>

External Link

<a
	aria-label="External Link"
	class="link-secondary"
	href="#link-styles"
	title="External Link"
>
	External Link
</a>

Monospaced

<a class="link-monospaced link-outline link-outline-primary" href="#1">
	<span class="inline-item">
		<svg
			class="lexicon-icon lexicon-icon-add-cell"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#add-cell" />
		</svg>
	</span>
</a>

<a
	class="link-monospaced link-outline link-outline-borderless link-outline-primary"
	href="#1"
>
	<span class="inline-item">
		<svg
			class="lexicon-icon lexicon-icon-add-cell"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#add-cell" />
		</svg>
	</span>
</a>

<a class="link-monospaced link-outline link-outline-secondary" href="#1">
	<span class="inline-item">
		<svg
			class="lexicon-icon lexicon-icon-picture"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#picture" />
		</svg>
	</span>
</a>

<a
	class="link-monospaced link-outline link-outline-borderless link-outline-secondary"
	href="#1"
>
	<span class="inline-item">
		<svg
			class="lexicon-icon lexicon-icon-picture"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#picture" />
		</svg>
	</span>
</a>

Title Link

<a
	aria-label="Title Link"
	class="component-title link-secondary"
	href="#title-link"
	title="Title"
>
	Title Link
</a>