Button

Description

The Button is one of the most important interactive elements in the design system. It enables users to take action — for example, saving changes, submitting a form, or moving forward in a process.

There are two main ways a Primary Button can appear:

• As a Button: used when the action happens within the same page (e.g. opening a modal, submitting data).
• As a Link styled as a Button: used when the action takes the user to another page or an external website.

The Tertiary Button includes an optional underline that can be toggled on or off through the boolean property “isGhost”. This ensures consistent behaviour and appearance while simplifying maintenance and documentation across Figma and development.

Component

Properties

ButtonProperties extends <React.ButtonHTMLAttributes<HTMLButtonElement>> which means it includes all standard HTML attributes that can be applied to a button element.

Prop	Type	Description	Optional
text	string	The text label displayed inside the pill button	❌
buttonStyle	'primary' | 'secondary' | 'tertiary'	The button style, 'primary' by default	✅
buttonSize	'sm' | 'md' | 'lg'	Defines the size of the button, 'md' by default	✅
buttonType	'button' | 'link'	Defines the type of node to render	❌
trailingIcon	ToyotaIcon | LexusIcon	Icon displayed after the text	✅
leadingIcon	ToyotaIcon | LexusIcon	Icon displayed before the text	✅
isGhost	boolean	Indicates if the tertiary button has the underline style	✅
className	ClassValue	Custom class names applied to the button element	✅

Example

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

const ButtonExample = () => {
  return <Button buttonType="button" text="Main Button" />;
};

export { ButtonExample };

Storybook

https://stunning-adventure-o796gr1.pages.github.io/react-components/?path=/docs/react-components-atoms-button—docs

Try the Button component in storybook:

Figma

https://www.figma.com/design/BMP7JhfVGX3h47BvUD0xXj/03-Components?node-id=7-3