Design System / Modules

Notifications

standardContentfeatures

Titled list of notifications — label, detail, and right-aligned meta.

Demo

Notifications
Your ticket is confirmedLaunch Night · 18 Jul
2h
New drop availableSummer collection is live
1d

Source

The rendered structure, live from the demo above — hover a row to highlight the element in the demo.

Waiting for the demo to render…

Colour Mapping

Every colour token this module consumes, resolved under the active profile — neutral · light · brand default. Switch the profile above the demo to remap.

--module-surfacevia shared
--module-fg-mutedvia shared

Token contract

SEMANTIC SLOTS

--module-surface ·shared--module-fg-muted ·shared

LAYOUT & TYPE

--radius-4 ·shared

Anatomy

LAYERS

Notifications ModuleModuleShell · card
Module HeaderRow
Module TitleRadix Text
Module CTARadix Badge
Module ContentColumn
Notification RowRow (per item)
Title + DetailColumn (Radix Text ×2)
MetaRadix Text

RADIX COMPONENTS

FlexText

SHARED COMPOSITES

ModuleShell

Fields

The client-editable schema (builder-kit/lib/fields.ts) — what the Builder's fields rail and the Portal Builder expose. Defaults are the sample props the demo renders with.

KeyLabelTypeOptionsSample default
titleModule titletext——
headerShow headertoggle——

Registry

Filemodules/features/NotificationsModule/NotificationsModule.tsx
ComponentNotificationsModule
Tier / groupstandard · features
Statusbuilt
Client referencescnx