Link

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

install	yarn add @clayui/link
version	3.111.0

Stable 3.111.0 View in Lexicon CHANGELOG

Styles
Single Link
Component Links
Component Action
- Anchor
- Button
External Link
Title Link

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

Styles

Regular Anchor Tag

.link-primary

Code Sample (expand to see it)

<div><a href="#1">Regular Anchor Tag</a></div>
<div><a class="link-primary" href="#1">.link-primary</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

Code Sample (expand to see it)

<a class="link-primary single-link" href="#1">.link-primary.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

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

<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="#1" 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

Code Sample (expand to see it)

<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>

External Link

Code Sample (expand to see it)

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

Title Link

Code Sample (expand to see it)

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