ChevronLink
- Library
- UDS Base
- Repository
- github.com/telus/universal-design-system
- Package
- npmjs.com/package/@telus-uds/components-base
- Package version
- 1.6.1
Introduction
import { ChevronLink } from '@telus-uds/components-base'
A ChevronLink is a navigational link to be used for a single, standalone call to action.
Guidance
Uses of ChevronLink should be limited to:
- An action that is performed by navigating to another page or screen
- A step in a multi-step process performed by navigating to another page or screen
- With the direction reversed, a "back" step in a multi-step multi-page process
Alternatives
Do not use ChevronLink 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
- General links that don't represent the logical next action: consider 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.
ChevronLink is by default treated as a navigational link by accessibility tools. This may be
overridden using accessiblityRole prop; however, in cases where this is appropriate, consider
whether ChevronLink is the most appropriate component to use. For example, for step transitions
within an app screen, the button role will be more appropriate, but therefore,
TextButton may be a more appropriate choice of component.
ChevronLink accepts React Native's accessibility props (web docs, native docs).
Platform considerations
On web, ChevronLink will render as an <a> anchor link if a href is provided, allowing for
common link actions such as open in new tab.
In native apps, ensure ChevronLink's onPress action utilizes the app navigation history and
does not clash with or contradict the behaviour of the device back button or back swipe action, or of
any on-screen back button (for example, often shown in the top left corner of a stack screen's header).
Props
| Name | Type | Default | Description |
|---|---|---|---|
| direction | 'left' | 'right' | 'right' | |
| tokens | custom | System tokens prop, see tokens for more details |
Variants
ChevronLink's variants are the same as for Link.