# Banner

Full-width page-level announcement.

## Examples

### Default

```tsx
import { Banner } from '@var-ui/react';

<Banner tone="success" appearance="solid">
  Deploy finished in 42s.
</Banner>
```

```astro
---
import { Banner } from '@var-ui/astro';
---

<Banner tone="success" appearance="solid">
  Deploy finished in 42s.
</Banner>
```

```html
<div data-tone="success" data-appearance="solid" class="var-ui-banner" data-banner role="status"><div data-tone="success" data-appearance="solid" class="var-ui-banner__content"><span>Deploy finished in 42s.</span></div></div>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| actions | ReactNode | no |  | Inline action elements (links, small buttons). |
| children | ReactNode | no |  | Announcement body text. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| dismissLabel | string \| undefined | no | Dismiss | Accessible label for the dismiss button. |
| icon | ReactNode | no |  | Override the default tone glyph; pass null to hide the icon slot. |
| onDismiss | (() => void) \| undefined | no |  | When provided, renders a dismiss button that calls this handler on press. |
| title | string \| undefined | no |  | Optional bold headline shown before the body text. |
| appearance | SurfaceAppearance \| undefined | no |  |  |
| tone | FeedbackTone \| undefined | no |  |  |

## Accessibility

Built on React Aria Components where applicable.