Skip to main content

Link

Used to navigate to other pages, or sections of a page.

github
View source code
figma
View design
import { Link } from '@uhg-abyss/mobile';
    () => {
      return <Link>Link Sandbox</Link>;
    };
    Important

    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.

    Important

    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.

    Name
    Type
    		DefaultDescription
    after
    Element | LinkInsertFunction | 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
    Element | LinkInsertFunction | undefined
    Insert element into link component before children
    Not supported on inline variant
    children
    ((string | number | boolean | Value | AnimatedInterpolation<string | number> | ((state: PressableStateCallbackType) => ReactNode) | WithAnimatedObject<...> | WithAnimatedObject<...> | WithAnimatedObject<...> | null) & string) | undefined
    Either children or a render prop that receives a boolean reflecting whether
    the component is currently pressed.
    Set the text of the link
    color
    Color | undefined
    Set the color of the link
    href
    string | undefined
    Set the URL of the link
    inline
    boolean | 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
    (((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | (((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined
    Called when a single tap gesture is detected.
    Callback fired when the link is pressed
    This function is called on press.
    Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).
    onPressIn
    (((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | (((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined
    Called when a touch is engaged before onPress.
    Callback fired when the link is pressed In
    onPressOut
    (((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | (((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined
    Called when a touch is released before onPress.
    Callback fired when the link is pressed Out
    size
    LinkSize | undefined
    'large'
    Set the size of the link
    underline
    boolean | undefined
    Used to underline the link text

    Class NameDescription
    abyss-link-iconLink icon
    abyss-link-labelLink label
    abyss-link-rootLink root element
    Translation KeyValue
    Link.iconTitleOpens in a browser window
    Token NameValue
    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
    Table of Contents