Chip

This component assists, filters and suggests to the user

Basic Usage


import { Chip } from '@krakentech/coral';
 
<Chip>Chip</Chip>

Chip

Properties

color


<Chip color="primary500">Chip</Chip>
<Chip color="secondary500">Chip</Chip>
<Chip color="tertiary500">Chip</Chip>
<Chip color="error500">Chip</Chip>
<Chip color="warning500">Chip</Chip>
<Chip color="success500">Chip</Chip>

Chip

href


<Chip href="https://octopus.energy">Chip</Chip>

Chip

size


<Chip size="small">Chip</Chip>

Chip

variant


<Chip variant="outlined">Chip</Chip>

Chip

Event Handlers


<Chip onClick={() => {}}>Chip</Chip>

Full API

Name	Type	Default
`ref`	`LegacyRef<HTMLAnchorElement> \| undefined` Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`key`	`Key \| null \| undefined`

Design

Good to know

Chips help users filter information, make selections or trigger actions. They are often used to list selectable items such a blog post topics you want to read about.

Why not use a button?

Although chips and buttons are similar you shouldn’t have groups of buttons in one area, however chips should appear together in sets.

Horizontal or vertical?

It is better practice to display chip sets stack horizontally rather than vertically.