Pill Button

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 };

Storybook

Try the Link Button component in storybook:

Figma

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