Components / Base

Notification

Inline alert banners for toasts, page callouts, and form feedback. Four semantic types map to the status palette, including a blue info theme for neutral informational updates.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/notification/registry.json

Requires the info colour tokens from Colours & Accent.

Usage

Use type="info" for FYI notices, feature announcements, and neutral system updates.

Notification · info

Owner portal update available

A new self-service levy statement view is now live for all owners.

tsx

import { Notification } from "@/components/ui/notification"

<Notification type="info" title="Owner portal update available">
  A new self-service levy statement view is now live for all owners.
</Notification>

Types

Default for low-priority notes. Info, warning, and danger use soft tinted backgrounds with saturated headings.

All notification types

Reminder

Committee meeting minutes are due within 7 days of the meeting.

Owner portal update available

A new self-service levy statement view is now live for all owners.

AGM date not confirmed

The proposed date still needs committee approval before notices can go out.

Levy payment failed

Direct debit for Lot 12 was declined. Follow up with the owner before the due date.

tsx

<Notification type="default" title="Reminder">
  Committee meeting minutes are due within 7 days of the meeting.
</Notification>

<Notification type="info" title="Owner portal update available">
  A new self-service levy statement view is now live for all owners.
</Notification>

<Notification type="warning" title="AGM date not confirmed">
  The proposed date still needs committee approval before notices can go out.
</Notification>

<Notification type="danger" title="Levy payment failed">
  Direct debit for Lot 12 was declined. Follow up with the owner before the due date.
</Notification>

Notification props

Prop	Type	Default	Description
title	string	-	Short heading shown above the body copy.
children	ReactNode	-	Supporting detail beneath the title.
type	"default" \| "info" \| "warning" \| "danger"	"default"	Semantic colour theme. info uses the blue notification palette; warning and danger match the status colours.
showIcon	boolean	true	When false, hides the leading icon. Icons should always pair with text.