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