# @leafygreen-ui/chip
> LeafyGreen UI Kit Chip
Latest version **4.2.1** (published 2026-01-21) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @leafygreen-ui/chip
pnpm add @leafygreen-ui/chip
yarn add @leafygreen-ui/chip
bun add @leafygreen-ui/chip
```
## Health
**Score 65/100 (B)** — status: stable.
Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 4.2.1 |
| Published | 2026-01-21 |
| First published | 2023-09-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 242 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 271 |
| Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck |
## Links
- npm: https://www.npmjs.com/package/@leafygreen-ui/chip
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/chip
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/chip
## Dependencies (6)
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.0
- [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.8.0
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.2
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.0
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.2
- [@leafygreen-ui/inline-definition](https://npm.io/package/@leafygreen-ui/inline-definition.md) ^9.2.1
## Recent versions
- 4.2.1 (latest) — 2026-01-21
- 1.0.1-popover.0 (popover) — 2024-01-16
- 4.2.0 — 2026-01-14
- 4.1.0 — 2026-01-08
- 4.0.10 — 2025-11-24
- 4.0.9 — 2025-11-13
- 4.0.8 — 2025-10-31
- 4.0.7 — 2025-10-21
- 4.0.6 — 2025-09-25
- 4.0.5 — 2025-09-10
- 4.0.4 — 2025-09-03
- 4.0.3 — 2025-07-03
- 4.0.2 — 2025-06-30
- 4.0.1 — 2025-06-16
- 4.0.0 — 2025-05-29
- … 22 more at https://npm.io/package/@leafygreen-ui/chip/versions
## README
# Chip
#### [View on MongoDB.design](https://www.mongodb.design/component/chip/live-example/)
## Installation
### PNPM
```shell
pnpm add @leafygreen-ui/chip
```
### Yarn
```shell
yarn add @leafygreen-ui/chip
```
### NPM
```shell
npm install @leafygreen-ui/chip
```
## Example
```js
import { Chip } from `@leafygreen-ui/chip`;
or
{}}
chipCharacterLimit={10}
chipTruncationLocation="end"
dismissButtonAriaLabel="aria-label"
darkMode
/>
```
## Properties
| Prop | Type | Description | Default |
| -------------------------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `label` | `React.ReactNode` | Label rendered in the chip | |
| `chipTruncationLocation` | `'end'` \| `'middle'` \| `'none'` \| `'start'` | Defines where the ellipses will appear in a Chip when the label length exceeds the `chipCharacterLimit`. If `none` is passed, the chip will not truncate. **Note**: If there is any truncation, the full label text will appear inside a tooltip on hover | `none` |
| `chipCharacterLimit` | `number` | Defines the character limit of a Chip before they start truncating. **Note**: the three ellipses dots are included in the character limit and the chip will only truncate if the chip length is greater than the `chipCharacterLimit`. | |
| `baseFontSize` | `'13'` \| `'16'` | Determines the base font-size of the chip. | |
| `variant` | `'gray'` \| `'blue'` \| `'green'` \| `'purple'` \| `'red'` \| `'yellow'` \| `'blue'` | The color of the chip. | |
| `glyph` | `React.ReactElement` | An icon glyph rendered before the text. To use a custom icon, see [Link](https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets) docs | |
| `disabled` | `boolean` | Determines if the chip should be disabled. | `false` |
| `onDismiss` | `React.MouseEventHandler` | Callback when dismiss button is clicked. If set, a dismiss button will render. | |
| `dismissButtonAriaLabel` | `string` | aria-label for the dismiss button. | `${label} deselect` |
| `enableAlwaysShowTooltip` _(optional)_ | `boolean` | When true, tooltip will always appear on hover regardless of truncation. When false or undefined, tooltip only appears when label is truncated. | `false` |
| `formatTooltip` _(optional)_ | `(label: ReactNode) => ReactNode` | Optional function that formats the tooltip content. When provided, the formatted content will be used instead of the raw label in the tooltip. Works with both truncated and always-visible tooltips. | |
| `tooltipAlign` _(optional)_ | `'top'` \| `'bottom'` | Determines the alignment of the tooltip relative to the chip. | `'bottom'` |
| `darkMode` | `boolean` | Render the component in dark mode. | `false` |
| ... | native `span` attributes | Any other props will be spread on the root `span` element |
---
_Source: https://npm.io/package/@leafygreen-ui/chip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._