Chip

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

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>

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>

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.