# Banner

> `Banner` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

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

`Banner` is part of the Containers set, imported from `@jcsoftdev/ui/containers`.

## Import

```ts
import { Banner } from "@jcsoftdev/ui/containers";
```

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

## Usage

```tsx
<Banner tone="info" icon={<Info className="size-4" />}>
  Hoy la barbería abre una hora más tarde, a las 10:00.
</Banner>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"danger" \| "warning" \| "success" \| "info"` | `"info"` |  |
| `icon` | `ReactNode` |  | Decorative icon on the left; marked `aria-hidden`. |
| `action` | `ReactNode` |  | Actions on the right, e.g. a retry button. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-banner--default)
- [Success](/storybook/?path=/story/containers-banner--success)
- [Warning](/storybook/?path=/story/containers-banner--warning)
- [Danger](/storybook/?path=/story/containers-banner--danger)
- [With Action](/storybook/?path=/story/containers-banner--with-action)
- [Without Icon](/storybook/?path=/story/containers-banner--without-icon)
- [Narrow](/storybook/?path=/story/containers-banner--narrow)

## Source

`packages/ui/src/containers/banner/banner.tsx`