# Banner

An inline notice about the page it sits on: a deploy is blocked, a quota is near.

Source page: https://sproutboat.com/ikada/components/banner

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/banner.json
```
Or from the package: `import { Banner } from "@sproutboat/ikada";`
## Usage
```tsx
import { Banner } from "@/components/ikada/banner";

<Banner tone="warning" title="Storage is at 91%">
  Writes pause at the limit.
</Banner>
```
## Examples
### Tones
Danger interrupts screen readers as an alert; every other tone is polite.
```tsx
<Banner title="Deploys use the new runtime">
  robin picks it up on the next deploy.
</Banner>
<Banner tone="success" title="Domain verified">
  robin.sproutboat.app is serving traffic.
</Banner>
<Banner tone="warning" title="Storage is at 91%">
  Writes pause at the limit.
</Banner>
<Banner tone="danger" title="Deploy blocked">
  wren failed its health check in eu-west.
</Banner>
```
### With an action
One action, usually a Button or a Link.
```tsx
<Banner
  tone="warning"
  title="DNS pending"
  action={<Button size="sm">Check records</Button>}
>
  Add the CNAME record for robin.sproutboat.app to finish.
</Banner>
```
### Dismissible
The close button hides the banner and calls onDismiss. Reload the page to bring it back.
```tsx
<Banner dismissible title="New region">
  us-east is open for new sprouts.
</Banner>
```
## Props
### BannerProps
Also takes every prop of `Omit<ComponentProps<"div">, "title">`.
| Prop | Type | Description |
| --- | --- | --- |
| tone? | `Status` | Status that sets the colour and the glyph. Default info. |
| title? | `ReactNode` | Bold first line; the children follow as the body. |
| action? | `ReactNode` | One action, usually a Button or Link. |
| dismissible? | `boolean` | Shows a close button. The banner hides itself and calls `onDismiss`. Default `false`. |
| onDismiss? | `(() => void)` | Shows a close button and is called when it is pressed. Without it the banner stays. |
| dismissLabel? | `string` | Accessible name of the close button. Default "Dismiss". |
Source: https://github.com/baronunread/ikada/blob/main/src/components/banner.tsx