Skip to content
Toyota Motor Europe DX Playbook

Chip

Chips are compact interactive buttons that represent a selectable option, such as a filter or category. They can be toggled on and off by the user.

Styles

Section titled “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>

Sizes

Section titled “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>

States

Section titled “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>

Schemes

Section titled “Schemes”

On Solid

Section titled “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>

React

Section titled “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

Section titled “Component”

Properties

Section titled “Properties”
PropTypeDescriptionRequired
labelstringLabel for the chip✅
sizeSizeDefines the size of the chip
classNameClassValueCustom classNames you want to apply on the chip button
isSelectedbooleanIndicates if the chip is currently selected
leadingIconToyotaIcon | LexusIconIcon displayed before the text
trailingIconToyotaIcon | LexusIconIcon displayed after the text

Example

Section titled “Example”
import { Chip } from '@tmedxp/react-components';


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


export { ChipExample };