Develop

Styles

Rounded buttons perfect for filters, tags, and selection interfaces.

Sizes

The default size is lg.

<button class="tng-pill-button is-sm">Small</button>
<button class="tng-pill-button is-md">Medium</button>
<button class="tng-pill-button is-lg">Large</button>

Default
Contrast

States

<button class="tng-pill-button is-selected">Selected</button>
<button class="tng-pill-button" disabled>Disabled</button>

Default
Contrast

On overlay

Light

<button class="tng-pill-button on-overlay">Rested</button>
<button class="tng-pill-button on-overlay is-selected">
  Selected
</button>
<button class="tng-pill-button on-overlay" disabled>Disabled</button>

CTA

<button class="tng-pill-button on-overlay is-cta">Rested</button>
<button class="tng-pill-button on-overlay is-cta is-selected">
  Selected
</button>
<button class="tng-pill-button on-overlay is-cta" disabled>
  Disabled
</button>

Icons

<button class="tng-pill-button">
  <i class="tng-icon icon-ui-spinner" aria-hidden="true"></i>
  <span>Loading</span>
</button>
<button class="tng-pill-button">
  <span>Popular</span>
  <i class="tng-icon icon-arrow-right" aria-hidden="true"></i>
</button>

Default
Contrast

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