# Led

> `Led` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

Source: https://ui.jcsoftdev.com/docs/components/led

`Led` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

## Import

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

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

## Usage

```tsx
<Led status="success" label="Barbero disponible" showLabel />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"danger" \| "warning" \| "success" \| "idle"` | `"success"` |  |
| `label` * | `string` |  | Text describing the status: color is never the only signal. |
| `showLabel` | `boolean` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/atoms-led--default)
- [Warning](/storybook/?path=/story/atoms-led--warning)
- [Danger](/storybook/?path=/story/atoms-led--danger)
- [Idle](/storybook/?path=/story/atoms-led--idle)
- [Label Hidden](/storybook/?path=/story/atoms-led--label-hidden)
- [All Statuses](/storybook/?path=/story/atoms-led--all-statuses)

## Source

`packages/ui/src/atoms/led/led.tsx`