Skip to main content

Link

Library
UDS Base
Repository
github.com/telus/universal-design-system
Package
npmjs.com/package/@telus-uds/components-base
Package version
1.6.1
Loading...

Introduction​

import { Link } from '@telus-uds/components-base'

A Link is a navigational element to take a user to a page.

Guidance​

Links should usually be used as standalone block-level elements. Keep choices simple and avoid listing many links outside of clearly labelled menus.

Alternatives​

Do not use Link for:

  • Actions that occur immediately on press: consider Button
  • Choices presented as calls to action: consider ButtonLink
  • Actions that occur within the current page or screen: consider TextButton
  • One navigation action that represents the user's logical next step: consider ChevronLink

Links may be nested within text, but consider that it is usually clearer to present navigation options after a user has completed a section or action, rather than as a mid-paragraph interruption.

Inline links should be used very sparingly; for example, for asides of interest only to a minority of readers.

Loading...

Note that Links do not automatically inherit text styles from surrounding text. Their styles are set specifically to the on-brand variants listed below.

Icons​

Icons may be imported from a palette and passed to the icon prop. By default, icons are aligned left, ensuring icons align when multiple links are stacked vertically.

import { Profile } from '@telus-uds/palette-<brand>/build/rn/icons'
;<Link href="https://telus.com" icon={Profile}>
  Profile
</Link>

The icon may be aligned to the right of the text using iconPosition prop.

<Link href="https://telus.com" icon={LinkExternal} iconPosition="right">
  Open external page
</Link>

Accessibility​

Insert A11yText any time an interactive element's label lacks context that a sighted user would see in the content around it. Many users of assistive technology explore a page by cycling through the interactive elements first.

<StackView space={3}>
  <Typography>Your contract is valid until April 9 2024.</Typography>
  <Link icon={DownloadPdf} href="https://telus.com">
    Download PDF
    <A11yText text="of your contract" />
  </Link>
  <Link icon={Print} href="https://telus.com">
    Print
    <A11yText text="your contract" />
  </Link>
</StackView>

Platform considerations​

On web, Link will render as an <a> anchor link if a href is provided, allowing for common link actions such as open in new tab.

On native apps, links to web addresses will be opened according to the user's device's link handling behaviour: usually opening the user's default browser (or choice of browsers) with a back action to return to the app.

Props​

NameTypeDefaultDescription
accessibilityRole'link'
variant{}System variant prop, see variants for more details