React

Description

The PillButton component renders a button with a pill-shaped design.

Pill buttons are secondary interactive elements used for filtering, tagging, or toggling options whitin the interface. They are visually lighter than standard buttons and should never be used for primary actions.

There are two main use cases:

• Selectable Pills: used to represent filters or toggles that can be selected/deselected.
• Informational Pills: used to highlight contextual information (e.g. labels or statuses).

Component

Properties

PillButtonProperties extends <React.HTMLAttributes<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	❌
className	ClassValue	Custom class names applied to the button element	✅
buttonSize	'sm' | 'md' | 'lg'	Defines the size of the button	✅
isHighlight	boolean	Indicates if the button should appear highlighted	✅
isSelected	boolean	Indicates if the button is currently selected	✅
isCta	boolean	Marks the button as a Call-To-Action (CTA)	✅
onOverlay	boolean	Indicates if the button is displayed on an overlay	✅
leadingIcon	ToyotaIcon | LexusIcon	Icon displayed before the text	✅
trailingIcon	ToyotaIcon | LexusIcon	Icon displayed after the text	✅

Example

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

const PillButtonExample = () => {
  return <PillButton text="Pill Button" />;
};

export { PillButtonExample };