PageBanner

seed-design's PageBanner (carrot-systems/crisp#1051) — an owner-requested exception to crisp's Attio-parity rule, the same as Select and Menu. Icon, title, description, action and close are each independently omittable, so a consumer never has to keep a hand-rolled banner around for the parts it can't back.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { PageBanner } from "@crisp-ui-kit/crisp";

<PageBanner
  icon={<Info size={16} />}
  title="Heads up:"
  description="Jira is not connected. Connect it in Settings."
  action="Connect"
  onAction={connectJira}
  onClose={dismiss}
/>;

Props

Examples

Tones and variants

Six tones (neutral, positive, informative, warning, critical, magic) and two variants (weak, the default; solid). tone="magic" has no solid counterpart — seed's own spec marks that combination invalid, and passing it logs a dev warning and falls back to variant="weak".