Link Button

Description

The Link Button component renders an anchor element. Link Buttons 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.

Link Buttons 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

Properties

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

Extra properties:

Prop	Type	Description	Optional
`text`	`string`	Visible label of the link	❌
`opensInNewWindowLabel`	`string`	Accessibility label used by screen readers	❌
`linksize`	`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

import { LinkButton } from '@tmedxp/react-components';

const LinkButtonExample = () => {
  return (
    <LinkButton
      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 { LinkButtonExample };

Storybook

Try the Link Button component in storybook:

Figma

https://www.figma.com/design/BMP7JhfVGX3h47BvUD0xXj/03-Components?node-id=2973-2092&t=QWmLOxmMlRfykQTB-0