# @leafygreen-ui/badge

> leafyGreen UI Kit Badge

Latest version **10.2.5** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/badge
pnpm add @leafygreen-ui/badge
yarn add @leafygreen-ui/badge
bun add @leafygreen-ui/badge
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 10.2.5 |
| Published | 2026-10-02 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 73.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/badge
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/badge
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/badge

## Dependencies (4)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3

## Recent versions

- 10.2.5 (latest) — 2026-10-02
- 8.0.9 (beta) — 2023-07-26
- 9.0.0-alpha.1 (alpha) — 2023-07-20
- 8.0.7-next.7 (next) — 2023-05-26
- 6.1.0-test.0 (test) — 2022-09-22
- 10.2.4 — 2026-01-21
- 10.2.3 — 2025-11-13
- 10.2.2 — 2025-10-31
- 10.2.1 — 2025-10-21
- 10.2.0 — 2025-10-07
- 10.1.3 — 2025-09-25
- 10.1.2 — 2025-09-10
- 10.1.1 — 2025-09-03
- 10.1.0 — 2025-08-18
- 10.0.4 — 2025-07-28
- … 76 more at https://npm.io/package/@leafygreen-ui/badge/versions

## README

# Badge

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/badge.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/badge/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/badge
```

### Yarn

```shell
yarn add @leafygreen-ui/badge
```

### NPM

```shell
npm install @leafygreen-ui/badge
```

## Example

```js
import Badge from '@leafygreen-ui/badge';

<Badge variant="blue" className="my-badge">
  New
</Badge>;
```

## Properties

| Prop        | Type                                                                              | Description                                                       | Default       |
| ----------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
| `variant`   | `'lightgray'`, `'darkgray'`, `'red'`, `'blue'`, `'green'`, `'yellow'`, `'purple'` | Sets the style variant of the badge.                              | `'lightgray'` |
| `className` | `string`                                                                          | Adds a className to the class attribute                           |               |
| `children`  | `node`                                                                            | The content that will appear inside of the `<Badge />` component. |               |
| ...         | native `div` attributes                                                           | Any other props will be spread on the root `div` element          |               |
| `darkMode`  | `boolean`                                                                         | Determines if the component renders in dark theme                 | `false`       |

---
_Source: https://npm.io/package/@leafygreen-ui/badge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._