Banner
An inline notice about the page it sits on: a deploy is blocked, a quota is near.
Storage is at 91%
Writes pause at the limit.
<Banner tone="warning" title="Storage is at 91%">
Writes pause at the limit.
</Banner>Props
tone
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/banner.jsonThe CLI writes components/ikada/banner.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Status Glyph. Or take it from the package: import { Banner } from "@sproutboat/ikada";
Usage
import { Banner } from "@/components/ikada/banner";
<Banner tone="warning" title="Storage is at 91%">
Writes pause at the limit.
</Banner>Examples
Deploys use the new runtime
robin picks it up on the next deploy.
Domain verified
robin.sproutboat.app is serving traffic.
Storage is at 91%
Writes pause at the limit.
Deploy blocked
wren failed its health check in eu-west.
<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>DNS pending
Add the CNAME record for robin.sproutboat.app to finish.
<Banner
tone="warning"
title="DNS pending"
action={<Button size="sm">Check records</Button>}
>
Add the CNAME record for robin.sproutboat.app to finish.
</Banner>New region
us-east is open for new sprouts.
<Banner dismissible title="New region">
us-east is open for new sprouts.
</Banner>Props
| 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". |
Also takes every prop of Omit<ComponentProps<"div">, "title">.
Source: src/components/banner.tsx