Skip to content

React

Description

Section titled “Description”

The Link component renders an anchor element. Links allow users to navigate between pages or sections while maintaining the visual hierarchy of buttons. They are used for actions that change context rather than trigger in-page processes.

Links are intended for inline or rich text components. Icons can be added but are optional, if the link is external the icon will be replaced by the external-link icon.

Component

Section titled “Component”

Properties

Section titled “Properties”

The LinkProperties extends <React.HTMLAttributes<HTMLAnchorElement>> which means it includes all standard HTML attributes that can be applied to an anchor element.

Prop Type Description Required
text string Visible label of the link ✅
opensInNewWindowLabel string Accessibility label used by screen readers ✅
size sm | md | lg Defines the size of the Link
className ClassValue Custom classes you want to apply to the anchor
icon ToyotaIcon | LexusIcon Icon name to display from the library
isNeutral boolean Applies a neutral style to reduce the link’s visual emphasis

Example

Section titled “Example”
import { Link } from '@tmedxp/react-components';


const LinkExample = () => {
  return (
    <Link
      href="https://www.toyota-europe.com"
      text="Go to Toyota Europe"
      opensInNewWindowLabel="(opens in a new window)"
      linksize="md"
      icon="external-link"
      isNeutral={false}
    />
  );
};


export { LinkExample };