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 Ref<HTMLAnchorElement>: The ref type for this component.

LinkProps

href * string: A URL to link to.
children * ReactNode: Text to display. Allows nesting other typography components.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
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 CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

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

StyleProps

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