Link API

Import

import { Link } from '@cimpress-ui/react';

Accessibility notes

Link component can be activated by pressing the Enter key, similar to a native HTML link.

Style inheritance

Links rendered within the text component will inherit the style of the surrounding text. Certain styles like color and text decoration will not be inherited, so that links remain visually distinct.

The example below renders two paragraphs of text with nested links. Notice that the links match the style of the containing paragraph, even though the link markup doesn’t change.

Preview
Code

This paragraph contains a nested link that inherits its style.

This paragraph also contains a nested link that inherits its style.

import { Link, Stack, Text } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Text as="p" variant="title-5" tone="base">
        This paragraph contains a <Link href="#">nested link</Link> that inherits its style.
      </Text>

      <Text as="p" variant="medium" tone="subtle" fontStyle="italic">
        This paragraph also contains a <Link href="#">nested link</Link> that inherits its style.
      </Text>
    </Stack>
  );
}

API reference

Link

Displays a textual link that allows users to navigate to another page or resource.

See link usage guidelines.

ref Section titled “ ref ” Ref<HTMLAnchorElement>: The ref type for this component.

LinkProps

href * Section titled “ href * ” string: A URL to link to.
children * Section titled “ children * ” ReactNode: Text to display. Allows nesting other typography components.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.
aria-label Section titled “ aria-label ” string: Defines a string value that labels the current element.
aria-labelledby Section titled “ aria-labelledby ” string: Identifies the element (or elements) that labels the current element.
aria-describedby Section titled “ aria-describedby ” string: Identifies the element (or elements) that describes the object.
aria-details Section titled “ aria-details ” string: Identifies the element (or elements) that provide a detailed, extended description for the object.
routerOptions Section titled “ routerOptions ” undefined: Options for the configured client side router.
iconStart Section titled “ iconStart ” ReactNode: An icon displayed before the link text.
iconEnd Section titled “ iconEnd ” ReactNode: An icon displayed after the link text.
variant Section titled “ variant ” 'small' | 'medium' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'title-5' | 'title-6' | 'body' | 'body-semibold' | 'medium-semibold' | 'small-semibold': Determines the visual variant of text.
fontStyle Section titled “ fontStyle ” 'normal' | 'italic': Whether the font should be styled with a normal or italic face.
alignment Section titled “ alignment ” 'center' | 'end' | 'start' | 'justify': Horizontal alignment of text.
isDisabled Section titled “ isDisabled ” boolean: Whether the link is disabled.
hrefLang Section titled “ hrefLang ” string: Hints at the human language of the linked URL. SeeMDN.
target Section titled “ target ” HTMLAttributeAnchorTarget: The target window for the link. See MDN.
rel Section titled “ rel ” string: The relationship between the linked resource and the current page. See MDN.
download Section titled “ download ” string | boolean: Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping Section titled “ ping ” string: A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy Section titled “ referrerPolicy ” HTMLAttributeReferrerPolicy: How much of the referrer to send when following the link. See MDN.
onHoverStart Section titled “ onHoverStart ” (e: HoverEvent) => void: Handler that is called when a hover interaction starts.
onHoverEnd Section titled “ onHoverEnd ” (e: HoverEvent) => void: Handler that is called when a hover interaction ends.

StyleProps

margin Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

Link API

Import

Accessibility notes

Style inheritance

API reference

Link

ref

href *

children *

data-cim-style-root

UNSAFE_className

UNSAFE_style

aria-label

aria-labelledby

aria-describedby

aria-details

routerOptions

iconStart

iconEnd

variant

fontStyle

alignment

isDisabled

hrefLang

target

rel

download

ping

referrerPolicy

onHoverStart

onHoverEnd

margin

marginX

marginY

marginTop

marginRight

marginBottom

marginLeft