import { Link } from '@uhg-abyss/mobile';<Link>Link Sandbox</Link>The children passed into the link must be a string or an error will appear.
Text
Change the children of the link to set the text. Note that the child must be a string.
Size
Use the size prop to set the size of the link. The default is set to large.
Color
Change the color of the link using the color prop. This accepts a design token or color string.
Alt
The alt prop can be used to create a link that contrasts against a dark background. Uses the alt color tokens.
Underline
The underline prop is used to underline the link text. The default is set to false.
Inline
The inline prop allows links to be embedded within other text content, keeping them inline with the surrounding text. When inline is set to true, the link behaves like regular inline text without breaking onto a new line. The default is set to false.
Note: When using the inline variant, the before and after props are not supported.
Inserting Elements
Insert elements into the Link component using the before and after props.
To account for press state color, the before and after props can accept a function whose arguments contain the properties color and isPressed.
Content Guidelines
The informational (left) icon should be used when the link is being used as a Tooltip. Do not use the right icon in this case. Tooltips can appear as icons only, or with text.
A directional (right) icon should be used when the link will take you to another screen.
Link Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| after | JSX.Element | Function | - | Insert element into link component after children |
| before | JSX.Element | Function | - | Insert element into link component before children |
| children | string | - | Set the text of the link |
| color | string | - | Set the color of the link |
| href | string | - | Set the URL of the link |
| inline | boolean | false | Keeps link inline with surrounding text. When true, before and after props are not supported |
| onPress | function | - | Callback fired when the link is pressed |
| size | "large" | "medium" | "small" | large | Set the size of the link |
| underline | boolean | false | Used to underline the link text |
Link Classes
| Class Name | Description |
|---|---|
| abyss-link-icon | Link icon |
| abyss-link-label | Link label |
| abyss-link-root | Link root element |
Link Translations
| Translation Key | Value |
|---|---|
| Link.iconTitle | Opens in a browser window |
Link Tokens
| Token Name | Value | |
|---|---|---|
| link.color.text.regular.rest | #196ECF | |
| link.color.text.regular.active | #004BA0 | |
| link.color.text.alt.rest | #FFFFFF | |
| link.color.text.alt.active | #A5DFE7 | |
| link.color.icon.regular.rest | #196ECF | |
| link.color.icon.regular.active | #004BA0 | |
| link.color.icon.alt.rest | #FFFFFF | |
| link.color.icon.alt.active | #A5DFE7 | |
| link.sizing.all.icon.trailing.lg | 24 | |
| link.sizing.all.icon.trailing.md | 20 | |
| link.sizing.all.icon.trailing.sm | 16 | |
| link.sizing.all.icon.leading.lg | 24 | |
| link.sizing.all.icon.leading.md | 20 | |
| link.sizing.all.icon.leading.sm | 16 | |
| link.spacing.gap.horizontal.container.leading-icon | 4 | |
| link.spacing.gap.horizontal.container.trailing-icon | 4 |