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.

Lorem ipsum dolor sit amet basic link nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet subtle link nisi ut aliquip ex ea commodo consequat.

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`