---
title: Banner
description: An inline, persistent status message with variants and actions.
---
import Source from './_generated/banner.mdx';

An inline, persistent status message that sits in normal layout flow — never fixed. Variants (`info` / `warning` / `error` / `success`) tint the leading icon from semantic tokens while the surface stays neutral. Android renders a full-width MD3 banner with a bottom hairline; iOS renders a grouped-inset rounded card. Both share the same markup — the cascade decides the frame.

<DemoFrame component="banner" />

## Installation

```bash
npx touchcn add banner
```

## Usage

<CodeGroup>

```html Angular
<tcn-banner variant="warning" dismissible (dismissed)="onDismiss()">
  Your subscription expires in 3 days.
  <div banner-actions>
    <button tcnButton size="sm">Renew</button>
  </div>
</tcn-banner>
```

```tsx React
import { TcnBanner } from '@/components/ui/banner';

<TcnBanner
  variant="warning"
  dismissible
  onDismiss={onDismiss}
  actions={<TcnButton size="sm">Renew</TcnButton>}
>
  Your subscription expires in 3 days.
</TcnBanner>
```

```vue Vue
<script setup lang="ts">
import { TcnBanner } from '@/components/ui/banner';
import { TcnButton } from '@/components/ui/button';
</script>

<template>
  <TcnBanner variant="warning" dismissible @dismiss="onDismiss">
    Your subscription expires in 3 days.
    <template #actions>
      <TcnButton size="sm">Renew</TcnButton>
    </template>
  </TcnBanner>
</template>
```

</CodeGroup>

The default content is the message; action buttons project into `[banner-actions]` (Angular) or the `actions` prop (React). `dismissible` adds a trailing close button. Error and warning banners carry `role="alert"`; info and success use `role="status"`.

## Props

| Prop          | Type                                          | Default  | Description                              |
| ------------- | --------------------------------------------- | -------- | ---------------------------------------- |
| `variant`     | `'info' \| 'warning' \| 'error' \| 'success'` | `'info'` | Tints the leading icon and ARIA role.    |
| `dismissible` | `boolean`                                     | `false`  | Show a trailing close button.            |
| `dismissed` / `onDismiss` | `event`                           | —        | Fired when the close button is pressed.  |

<Source />