---
id: chip
title: Chip
---

# Chip

The Chip component can be used to represent small blocks of information.

## How to use

<code src="@digigov/ui/src/content/Chip/__stories__/Default.tsx" />

### Clickable Chip

<code src="@digigov/ui/src/content/Chip/__stories__/ClickableChip.tsx" />

### Clickable and Deletable

<code src="@digigov/ui/src/content/Chip/__stories__/ClickableDeletableChip.tsx" />

### Deletable Chip

<code src="@digigov/ui/src/content/Chip/__stories__/DeletableChip.tsx" />

### Group of Chips

<code src="@digigov/ui/src/content/Chip/__stories__/GroupOfChips.tsx" />

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={["Chip", "ChipContainer", "ChipHeading", "ChipKeyValue"]} />