# StatusPill

> Pill showing a status LED and its label; the label is hidden when the surrounding container (e.g.

Source: https://ui.jcsoftdev.com/docs/components/status-pill

Pill showing a status LED and its label; the label is hidden when the surrounding container (e.g. the topbar) is narrow.

## Import

```ts
import { StatusPill } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/status-pill`.

## Usage

```tsx
<StatusPill status="success" label="Caja abierta" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` * | `"danger" \| "warning" \| "success" \| "idle"` |  |  |
| `label` * | `string` |  |  |
| `onSelect` | `(() => void)` |  | Without this the pill is decorative (disabled). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/atoms-statuspill--default)
- [Warning](/storybook/?path=/story/atoms-statuspill--warning)
- [Danger](/storybook/?path=/story/atoms-statuspill--danger)
- [Idle](/storybook/?path=/story/atoms-statuspill--idle)
- [Decorative](/storybook/?path=/story/atoms-statuspill--decorative)

## Source

`packages/ui/src/atoms/status-pill/status-pill.tsx`