# OfflineBanner

> `OfflineBanner` is part of the States set, imported from `@jcsoftdev/ui/states`.

Source: https://ui.jcsoftdev.com/docs/components/offline-banner

`OfflineBanner` is part of the States set, imported from `@jcsoftdev/ui/states`.

## Import

```ts
import { OfflineBanner } from "@jcsoftdev/ui/states";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/states/offline-banner`.

## Usage

```tsx
<OfflineBanner
  message="Sin conexión. Los cobros se guardarán y se enviarán al reconectar."
  queuedChanges={0}
  queuedLabel="cambios pendientes"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `queuedChanges` | `number` | `0` | Number of changes queued while waiting to reconnect. |
| `queuedLabel` | `string` |  | Screen reader text for the queue counter. |
| `message` * | `ReactNode` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/states-offlinebanner--default)
- [With Queued Changes](/storybook/?path=/story/states-offlinebanner--with-queued-changes)

## Source

`packages/ui/src/states/offline-banner/offline-banner.tsx`