Link
yarn add @clayui/link
Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.
Stable3.2.0View in LexiconCHANGELOG
Basic Usage
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.
With Context
Additionally, if you want to customize every Link component in your app, you are able to do so by using <ClayLinkContext.Provider />.
Code Sample (expand to see it)
API
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
borderless | boolean | false | Flag to indicate if link should be borderless. | |
button | boolean | { block?: boolean; monospaced?: boolean; small?: boolean; } | false | Config for button props | |
displayType | 'primary' | 'secondary' | 'unstyled' | false | Determines how the link is displayed. | |
monospaced | boolean | false | Flag to indicate if link should be monospaced. | |
outline | boolean | false | Flag to indicate if link need have an outline. |
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
<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/.
<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).
<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="#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
<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
<a class="link-outline link-outline-primary" href="#1">Primary</a>
<a class="link-outline link-outline-secondary" href="#1">Secondary</a>Outline Borderless
<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>