---
title: "Stage Banner"
description: "A full-width announcement strip with a status dot, optional action button and dismiss control."
---

A full-width announcement strip with a status dot, optional action button and dismiss control. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Stage Banner — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add stage-banner
```

npm dependencies: class-variance-authority.

Files written — React: components/ui/stage-banner.tsx. Vue: components/ui/stage-banner/StageBanner.vue, components/ui/stage-banner/StageBannerDot.vue, components/ui/stage-banner/StageBannerAction.vue, components/ui/stage-banner/StageBannerClose.vue, components/ui/stage-banner/index.ts.

## Usage

React:

```tsx
import { StageBanner } from "@/components/ui/stage-banner"
```

Vue:

```ts
import { StageBanner, StageBannerDot, StageBannerAction, StageBannerClose } from "@/components/ui/stage-banner"
```

## API reference

**`StageBanner`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean \| undefined` | — | Controlled visibility; when omitted the banner manages its own state. |
| `onOpenChange` | `(open: boolean) => void \| undefined` | — | Fired when the banner is dismissed via StageBannerClose. |

The registry exports `StageBanner`, `StageBannerDot`, `StageBannerAction`, `StageBannerClose`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Stage Banner reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.