Link - Clay

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

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

Types

Inline Link

This is an inline link example.

{call ClayLink}
    {param ariaLabel: 'inline link'}
    {param href: '#link-styles' /}
    {param label: 'inline link' /}
{/call}

<clay-link
    ariaLabel="inline link"
    href="#link-styles"
    label="inline link"
></clay-link>

This is a <a aria-label="inline link" href="#link-styles">inline link</a> example.

Single Link

Default

{call ClayLink}
    {param ariaLabel: 'Default Link' /}
    {param href: '#link-styles' /}
    {param label: 'Default' /}
{/call}

<clay-link
    ariaLabel="Default Link"
    href="#link-styles"
    label="Default"
></clay-link>

<h5><a aria-label="Default Link" href="#link-styles">Default</a></h5>

Secondary

{call ClayLink}
    {param ariaLabel: 'Secondary Link' /}
    {param href: '#link-styles' /}
    {param label: 'Secondary' /}
    {param style: 'secondary' /}
{/call}

<clay-link
    ariaLabel="Secondary Link"
    href="#link-styles"
    label="Secondary"
    style="secondary"
></clay-link>

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

Title Link

Title

{call ClayLink}
    {param elementClasses: 'component-title' /}
    {param href: '#link-styles' /}
    {param label: 'Title' /}
    {param style: 'secondary' /}
{/call}

<clay-link
    ariaLabel="Title Link"
    elementClasses="component-title"
    href="#link-styles"
    label="Title"
    style="secondary"
></clay-link>

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

External Link

{call ClayLink}
    {param ariaLabel: 'External Link' /}
    {param href: '#link-styles' /}
    {param label: 'External Link' /}
    {param style: 'secondary' /}
    {param title: 'External Link' /}
{/call}

<clay-link
    aria-label="External Link"
    buttonStyle="link"
    href="#link-styles"
    label="Title"
    style="secondary"
    title="External Link"
></clay-link>

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

API

Property	Description	Type	Required	Default
ariaLabel	Aria label attribute for the anchor element.	string\|undefined	false	undefined
ariaExpanded	Aria Expanded attribute for the anchor element.	bool\|undefined	false	undefined
buttonStyle	The css class to act as a button. If this is defined	string\|undefined	false	undefined
data	Data to add to the element.	object	false	undefined
download	Sets the download attribute on the anchor tag.	string\|undefined	false	undefined
elementClasses	CSS classes to be applied to the element.	string\|undefined	false	undefined
href	Sets the HTML attribute href on the anchor tag.	string\|undefined	false	undefined
icon	Icon to be rendered in the link.	string\|undefined	false	undefined
iconAlignment	Render position of the ClayIcon in the ClayLink element.	string	false	left
id	Id to be applied to the element.	string\|undefined	false	undefined
imageAlt	Alternative text of the image to be rendered inside the link.	string\|undefined	false	undefined
imageSrc	Source of the image to be rendered inside the link.	string\|undefined	false	undefined
label	Sets the text or HTML to be rendered inside the anchor tag.	html\|string\|undefined	false	undefined
spritemap	The path to the SVG spritemap file containing the icons.	undefined	undefined	undefined
style	The css class that colors the button.	string\|undefined	false	undefined
target	Sets the HTML attribute target on the anchor tag.	string\|undefined	false	undefined
title	Sets the HTML attribute title on the anchor tag.	string\|undefined	false	undefined