# @dd-test/bdge

> leafyGreen UI Kit Badge

Latest version **4.0.3** (published 2021-04-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @dd-test/bdge
pnpm add @dd-test/bdge
yarn add @dd-test/bdge
bun add @dd-test/bdge
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2021-04-21 |
| First published | 2021-04-21 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 181.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dave.mccarthy |

## Links

- npm: https://www.npmjs.com/package/@dd-test/bdge
- npm.io page: https://npm.io/package/@dd-test/bdge

## Dependencies (2)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^7.0.0
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^3.2.1

## Recent versions

- 4.0.3 (latest) — 2021-04-21

## README

# Badge

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

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

## Installation

### 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>;
```

**Output HTML**

```html
<div class="leafygreen-ui-rhgfxf my-badge">New</div>
```

## Properties

| Prop        | Type                                                                  | Description                                                       | Default       |
| ----------- | --------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
| `variant`   | `'lightgray'`, `'darkgray'`, `'red'`, `'blue'`, `'green'`, `'yellow'` | 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          |               |

_Note: Specifying the `onClick` attribute will change the cursor style to pointer._

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