Chip

Chips are used to toggle an action, their label should express what action will occur when the user interacts with it.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Chip } from '@adaptavant/eds-core';

Pressed​

The chip has two states, pressed and not pressed.

The isPressed prop is used to indicate the Chip which the current filtered selection is associated with.

<Chip>
  Not pressed
</Chip>

<Chip isPressed>
  Pressed
</Chip>
View in Playroom

Size​

Customise the size of the Chip via the size prop.

{/* small */}
<Chip size="small">
  Small
</Chip>

{/* standard */}
<Chip size="standard">
  Standard
</Chip>

{/* large */}
<Chip size="large">
  Large
</Chip>
View in Playroom

Count​

Use the count prop to display a badge with a number on the right side of the chip. This is useful for showing quantities, like the number of selected items or filtered results.

Key behaviors:

  • Only displays when count >= 0
  • Counts greater than 99 display as "99+"
{/* No badge */}
<Chip>
  Services
</Chip>

{/* With count */}
<Chip count={3}>
  Services
</Chip>

{/* Max cap at 99 */}
<Chip count={100}>
  Services
</Chip>

{/* With pressed state */}
<Chip isPressed count={5}>
  Featured
</Chip>
View in Playroom

API Reference​

Chip

PropDefaultDescription
children_ReactNode
The content to be displayed inside the chip.
isPressed?falseboolean
If true, the chip will be visually styled as pressed and the aria-pressed attribute will be set accordingly.
size?'standard''large' | 'standard' | 'small'
Size of the chip.
count?_number
Optional count badge displayed on the right of the chip. Only displays when count >= 0. Counts greater than 99 display as "99+".
id?_string
Specifies a unique id for the chip.
onClick?_function
Function to call when the chip is clicked.
aria-controls?_string
Identifies the element (or elements) that the chip controls.
aria-expanded?_boolean
Indicates whether the chip, or another element that it controls, is currently expanded or collapsed.
aria-haspopup?_boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
Indicates the availability and type of interactive popup element, such as menu or dialog, triggered by the chip.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Chip parts​

{/* Styling the count part */}
<Chip
	classNames={{
		count: 'bg-accent text-onPrimary',
	}}
	count={5}
>
	Filter
</Chip>
View in Playroom