Link
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/ds-allium
- Package version
- 1.14.0
Introduction
import { Link } from '@telus-uds/ds-allium'
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
Inline links
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.
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 and passed to the icon prop. Note that only icons from the
section tagged "Links" should be used in a Link.
By default, icons are aligned left, ensuring icons align when multiple links are stacked vertically.
import { Profile, Settings } from '@telus-uds/palette-allium/build/web/icons'
The icon may be aligned to the right of the text using iconPosition prop.
import { LinkExternal } from '@telus-uds/palette-allium/build/web/icons'
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.
import { DownloadPdf, Print } from '@telus-uds/palette-allium/build/web/icons'
Platform considerations
The component is available on both native platforms and web.
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
| Name | Type | Default | Description |
|---|---|---|---|
| accessibilityRole | 'link' | ||
| variant | {} | System variant prop, see variants for more details |
Tokens
In exceptional circumstances, the following tokens can be passed to this component to override its default styles. Do not do this unless absolutely necessary. Read more about overriding styles.
View Tokens
| Prop Name | Token Property | Token Type |
|---|
Figma
Variants
Size
Link's size variants correspond to equivalent Typography body text size variants, with fine adjustments applied where necessary
for accessibility and usability. Choose sizes that complement surrounding text content.
size: 'large'
default (medium) size
size: 'small'
size: 'caption'
The caption size is similar to the Typography variant
{ size: 'micro' }, intended for infrequent use in cases such as credits for small image captions.
Alternative
Set a link in the "alternative" style using variant={{ alternative: true }} in cases where a less eye-catching grey is more appropriate.
As this is less visually distinct, be careful to only use this variant where it is obvious from context that this is a link.
Inverse
Use inverse links on darker backgrounds.
Feedback
- Spotted a problem with this component? Raise an issue on GitHub
- See any existing issues for this component
- Contact the team on slack in #ds-allium-support