ChevronLink
- 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 { ChevronLink } from '@telus-uds/ds-allium'
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
The component is available on both native platforms and web.
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 |
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 |
|---|---|---|
| tokens | leftIcon | icon |
| rightIcon | icon | |
| iconDisplace | size | |
| iconSize | size | |
| iconSpace | integer | |
| textLine | textLine | |
| color | color | |
| textLineStyle | textLineStyle | |
| outerBorderColor | color | |
| outerBorderWidth | border | |
| outerBorderGap | size | |
| outerBorderOutline | borderStyle | |
| borderRadius | radius | |
| blockFontName | fontName | |
| blockFontWeight | fontWeight | |
| blockFontSize | fontSize | |
| blockLineHeight | lineHeight | |
| icon | icon | |
| iconTranslateX | size | |
| iconTranslateY | size | |
| alignSelf | flexAlign |
Figma
Variants
ChevronLink's variants are the same as for Link.
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