Skip to content

Develop

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”

Use is-selected for a chip that’s currently chosen. The pressed appearance applies automatically while the chip is held (:active); add is-active to pin that appearance — for example, while a menu the chip controls is open. Disable a chip with the native disabled attribute.

<button class="tng-chip is-active">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Active</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<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>

Variants

Section titled “Variants”

On Image

Section titled “On Image”

Use on-image when placing chips on top of imagery — for example, over a hero or product photo.

<button class="tng-chip on-image">
  <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-image 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-image" 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>

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>

Suggestion

Section titled “Suggestion”

Use is-suggestion for a filter-style pill — a white rested fill, a trailing arrow, and a dark selected state. It’s the chip behind the suggestions in Chat messages. The label sits in a <span> and the arrow is a decorative trailing icon-ui-arrow-right.

<button class="tng-chip is-suggestion">
  <span>Label</span>
  <i class="tng-icon icon-ui-arrow-right" aria-hidden="true"></i>
</button>
<button class="tng-chip is-suggestion is-selected">
  <span>Selected</span>
  <i class="tng-icon icon-ui-arrow-right" aria-hidden="true"></i>
</button>
<button class="tng-chip is-suggestion" disabled>
  <span>Disabled</span>
  <i class="tng-icon icon-ui-arrow-right" 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”
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

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


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


export { ChipExample };