ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Link

yarn add @clayui/link

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

  • Examples
  • Markup
  • API

Stable3.2.0View in LexiconCHANGELOGstorybook demos

  • Styles
  • Single Link
  • Component Links
  • Component Action

    • Anchor
    • Button
  • Outline
  • Outline Borderless
  • External Link
  • Monospaced
  • Title Link
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
Copied!
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>
<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
Copied!
Code Sample (expand to see it)
<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

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

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

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

Outline

Primary Secondary
Copied!
Code Sample (expand to see it)
<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
Copied!
Code Sample (expand to see it)
<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

External Link
Copied!
Code Sample (expand to see it)
<a
	aria-label="External Link"
	class="link-secondary"
	href="#link-styles"
	title="External Link"
>
	External Link
</a>

Monospaced

Copied!
Code Sample (expand to see it)
<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

Title Link
Copied!
Code Sample (expand to see it)
<a
	aria-label="Title Link"
	class="component-title link-secondary"
	href="#title-link"
	title="Title"
>
	Title Link
</a>

How can this be improved? Create an issue!