Link

Installation

Install

yarn add @iag/chroma-react-ui.components

Import

import { Link } from '@iag/chroma-react-ui.components';

Accessibility

Accessibility documentation(opens in new window)

Default

Inverse

Example with icon

onClick

Button Link

Target Prop

target="_blank" to open url in new window

Download Prop

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Without a value, the browser will suggest a filename/extension. How browsers treat downloads varies by browser, user settings, and other factors see mdn web docs for more details.

<Link href="/img/myfile.png" download>Download a file</Link>
<Link href="/img/myfile.png" download="test">Download a file called "test"</Link>

Properties

Name

Description

• variant
  "inverse" | "outline" | "text" | "buttonTextInverse" | "buttonInverse" | "buttonOutlineInverse" | "buttonPrimary" | "buttonPrimaryOutline" | "buttonPrimaryInverse" | "buttonPrimaryOutlineInverse" | ... 19 more ... | "buttonDestructiveTextInverse"Determines the style of the Link. Can be one of several predefined variations, including "inverse", "outline", "text", or button styles like "buttonPrimary".
• children*
  ReactNodeThe content to display inside the Link.
• className
  stringAdditional CSS classes to be applied to the Link.
• download
  string | booleanCauses the browser to treat the linked URL as a download. Can be used with or without a filename value. Without a value, the browser will suggest a filename/extension.
• href
  stringThe link's href attribute, defining the target URL.
• id
  stringHTML id attribute for the component
• onClick
  (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => voidCallback function fired when the Link is clicked.
• disabled
  booleanWhether the Link is disabled.
• target
  stringThe link's target attribute, such as "_blank" to open the link in a new window. Setting `target="_blank"` will also set text for screen readers to notify of a new window.
• rel
  stringThe link's rel attribute, such as "external" for links to external domains.

CSS Variables