You are viewing a PR preview for PR #1506

Agriculture Design System
Beta
Design System for the Export Service

Text link

A typographic component for creating hyperlinks.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/text-link';

Usage

Text link components can be imported via the text-link entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/text-link';

Props

TextLink Props
PropTypeDescription
aria-label?stringDescribes the anchor element to assistive technologies.
children?ReactNode
download?anyCauses the browser to treat the linked URL as a download.
href?stringThe URL that the hyperlink points to.
id?stringThe ID of the hyperlink.
onClick?MouseEventHandler<HTMLAnchorElement>Function to be fired following a click event of the link.
ref?Ref<HTMLAnchorElement>
referrerPolicy?HTMLAttributeReferrerPolicyHow much of the referrer to send when following the link.
rel?stringThe relationship of the linked URL as space-separated link types.
role?AriaRoleWAI-ARIA role.
target?HTMLAttributeAnchorTargetWhere to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
TextLinkExternal Props
PropTypeDescription
aria-label?stringDescribes the anchor element to assistive technologies.
children?ReactNode
download?anyCauses the browser to treat the linked URL as a download.
href?stringThe URL that the hyperlink points to.
id?stringThe ID of the hyperlink.
onClick?MouseEventHandler<HTMLAnchorElement>Function to be fired following a click event of the link.
referrerPolicy?HTMLAttributeReferrerPolicyHow much of the referrer to send when following the link.
rel?stringThe relationship of the linked URL as space-separated link types.
role?AriaRoleWAI-ARIA role.
target?HTMLAttributeAnchorTargetWhere to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).

Source

You can view the full source code for this package on Github.