Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Link

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

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

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

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
defaultEventHandler
Object that wires events with default listeners object|undefined 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

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.