Snackbar
A bottom-anchored mobile notification pill, from seed-design.
A single dark, bottom-anchored notification pill for mobile-pattern apps — from
daangn/seed-design's snackbar.yaml (crisp#911, crisp has no such component measured from
Attio). Wrap your app in a SnackbarProvider, then call useSnackbar().show({...}) from
anywhere. Only one snackbar shows at a time; a second call queues behind the first. There is
no close button — seed's own anatomy has none — so it either auto-dismisses or is cleared by
its own action.
Installation
npm install @crisp-ui-kit/crispProps
show(options) accepts { message, variant?, duration?, action? } where variant is
"default" | "positive" | "critical" (only positive/critical render a tone-coloured
prefix icon, matching seed's own anatomy), duration is ms (0 keeps it until dismiss()
or its action fires, default 4000), and action is { label, onClick }.
SnackbarProvider
| Prop | Type | Default | Description |
|---|---|---|---|
duration | number | 4000 | Default auto-dismiss ms for snackbars that don't set their own. |
regionLabel | string | "Notifications" | aria-label on the always-mounted notifications region. |
A deliberate colour deviation
seed's spec (snackbar.yaml) colours the action label with $color.fg.brand — seed's own
carrot-orange. crisp's brand token is TechPartners' verified blue instead (the identity
migration takes seed's structure, crisp's own colour — see
~/grc-parity/seed-identity-spec.md), and that blue measures 4.11:1 against the pill's dark
background — below AA's 4.5:1 for 14px text. The action reads in the same token the message
uses (fgOnNeutralInverted) at bold weight instead, until a dedicated on-dark brand step is
measured.