Link

Used for creating links.

  • Install
    npm install @pluralsight/ps-design-system-link
  • Import
    import Link from '@pluralsight/ps-design-system-link'

Examples

Links are used to embed actions or pathways to more information within a sentence.

The Link component simply styles the child element that you pass to it. You bring all your own semantics or links that support client-side routing.

import React from 'react'
import Link from '@pluralsight/ps-design-system-link'
const Comp = () => (
<div className="example-flex-column">
<p>
Lorem ipsum dolor sit amet{' '}
<Link>
<a href="https://duckduckgo.com">basic link</a>
</Link>{' '}
nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet{' '}
<Link appearance={Link.appearances.subtle}>
<a href="https://duckduckgo.com">subtle link</a>
</Link>{' '}
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
)
export default Comp

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

WAI-ARIA Patterns: Link

Props

Name
Type
Description
Default
appearance
default | subtle
visual style (from Link.appearances)default