import { Link } from '@uhg-abyss/mobile';() => { return <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.
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
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
after | React.JSX.Element | (props: { color?: Abyss.Color; isPressed?: boolean; }) => React.JSX.Element | never | undefined | - | - | Insert element into link component after children Not supported on inline variant |
alt | boolean | undefined | false | - | Set the color of the Link to the alt variant |
before | React.JSX.Element | (props: { color?: Abyss.Color; isPressed?: boolean; }) => React.JSX.Element | never | undefined | - | - | Insert element into link component before children Not supported on inline variant |
children | string | undefined | - | - | Set the text of the link |
color | Abyss.Color | undefined | - | - | Set the color of the link |
href | string | undefined | - | - | Set the URL of the link |
inline | false | true | undefined | false | - | Render as standard Pressable link with flexbox layout. Supports before/after icons. Use inline={true} for text-inline variant. Render as inline Text element for use within other Text components. Does not support before/after icons. |
onPress | Abyss.GestureResponderEventHandler | - | - | Callback fired when the link is pressed |
onPressIn | Abyss.GestureResponderEventHandler | - | - | Callback fired when the link is pressed In |
onPressOut | Abyss.GestureResponderEventHandler | - | - | Callback fired when the link is pressed Out |
size | 'large' | 'medium' | 'small' | undefined | 'large' | - | Set the size of the link |
underline | boolean | undefined | - | - | Used to underline the link text |
Link Classes
| Class Name | Description |
|---|---|
| abyss-link-root | Link root element |
| abyss-link-label | Link label |
| abyss-link-icon | Link icon |
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 |