# Opening Status Indicator

> The open/closed pill atom on its own. Reads the shared `useNow()` clock and an `OpeningHours` value to color the label green or red.

## Playground

An interactive playground for OpeningStatusIndicator is embedded above. Open the canonical story on Storybook: [https://storybook.laioutr.cloud/?path=/story/ui-kit-atoms-openingstatusindicator--open-now](https://storybook.laioutr.cloud/?path=/story/ui-kit-atoms-openingstatusindicator--open-now)

## Overview

`OpeningStatusIndicator` is the open/closed atom. It takes an [`OpeningHours`](/frontend/api-reference/common-types/opening-hours) value and renders a small bold label colored by the `--success-11` token when open or `--red-11` when closed. The label text comes from the `openingStatus.open` and `openingStatus.closed` i18n keys.

The component subscribes to the shared `useNow()` clock under the hood, so the label flips automatically when the next state-change time passes. Pass `now` to override the clock for tests and Storybook.

Use it on its own when only the open/closed state matters (a row of store badges on a category page, an inline indicator next to a header logo). Reach for [`OpeningStatus`](/laioutr-ui/ui-kit/general/opening-status) when you also want the next state-change one-liner.

## Key Business & UX Benefits

- Token-driven success and red colors keep "open" and "closed" semantically consistent across light, dark, and brand themes.
- One atom shared across location-card lists, store badges, and headers stops each surface from drawing its own pill with slightly different colors.
- Reactive against the shared clock, so a store list rendered before opening time flips to "Open" the second the schedule says so, without a page refresh.

## Feature List

<features :items="["Open vs. closed driven entirely by the `OpeningHours` value and the shared `useNow()` clock","Token-driven colors (`--success-11` open, `--red-11` closed) stay semantic across themes","Text comes from the `openingStatus.open` and `openingStatus.closed` i18n keys, so localization works without per-instance overrides","Respects the schedule's IANA timezone, so wall-clock comparisons stay correct across shopper locales","Optional `now` prop overrides the clock for tests and Storybook"]">



</features>

## API Reference

#### Props

```json
{"type":"object","properties":{"openingHours":{"type":"object","properties":{"timeZone":{"type":"string","description":"IANA time zone (e.g. 'Europe/Berlin'). Schedule HH:mm values are wall-clock\ntimes in this zone. When absent, schedule times are interpreted in the\nbrowser's local zone."},"schedule":{"description":"Weekly schedule. Missing key (or empty array) means closed that day."},"exceptions":{"description":"One-off overrides keyed by 'YYYY-MM-DD'. Empty array means closed."}},"additionalProperties":false,"required":["schedule"]},"now":{"description":"Override for tests / Storybook only. Production uses the shared `useNow()`.","type":"object","properties":{},"additionalProperties":false}},"required":["openingHours"]}
```

## Related

- [`OpeningStatus`](/laioutr-ui/ui-kit/general/opening-status): the indicator paired with the next state-change one-liner.
- [`OpeningStatusDetail`](/laioutr-ui/ui-kit/general/opening-status-detail): the detail one-liner on its own.
- [`OpeningHours` type](/frontend/api-reference/common-types/opening-hours): the shape the component consumes.