Develop

Styles

<button class="tng-chip">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Label</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Label

Sizes

The default size is sm.

<button class="tng-chip is-sm">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Small</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip is-lg">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Large</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Small Large

States

<button class="tng-chip is-selected">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Selected</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip" disabled>
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Disabled</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Selected Disabled

Schemes

On Solid

Use on-solid when placing chips on a dark or contrast background.

<button class="tng-chip on-solid">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Label</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip on-solid is-selected">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Selected</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip on-solid" disabled>
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Disabled</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Label Selected Disabled

React

When to use it (and when not to):

• Use when:
  • To let users apply or remove filters within a search or listing experience
  • To represent selectable options within a group where multiple choices are possible
  • To display active selections that the user can individually dismiss
  • When the interaction is user-initiated and the element needs to communicate a selected or unselected state
• Avoid when:
  • To display read-only metadata or categorisation with no interaction, use a Label instead
  • To communicate a system-assigned state such as availability or stock status, use a Label status variant instead
  • As a replacement for a button when the intent is to trigger an action rather than manage a selection
  • When the element is purely decorative and carries no interactive meaning

Component

Properties

Prop	Type	Description	Required
label	string	Label for the chip	✅
size	Size	Defines the size of the chip
className	ClassValue	Custom classNames you want to apply on the chip button
isSelected	boolean	Indicates if the chip is currently selected
leadingIcon	ToyotaIcon | LexusIcon	Icon displayed before the text
trailingIcon	ToyotaIcon | LexusIcon	Icon displayed after the text

Example

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

const ChipExample = () => {
  return <Chip text="Label" />;
};

export { ChipExample };