NotificationCenter

A notification-center frame composed from header, scroller, list, item, and action parts.

Preview#

The snippets show the default trigger. Brutal previews swap in a custom trigger through render to demonstrate the source bell affordance.

NotificationCenterPopup is the surface. NotificationCenterHeader, NotificationCenterScroller, NotificationCenterList, and NotificationCenterItem are content slots and should live inside the popup unless you intentionally provide your own shell.

import {
  NotificationCenter,
  NotificationCenterActionButton,
  NotificationCenterCount,
  NotificationCenterHeader,
  NotificationCenterItem,
  NotificationCenterItemActions,
  NotificationCenterItemBody,
  NotificationCenterItemContent,
  NotificationCenterItemIcon,
  NotificationCenterItemRow,
  NotificationCenterItemTitle,
  NotificationCenterList,
  NotificationCenterPopup,
  NotificationCenterScroller,
  NotificationCenterTitle,
  NotificationCenterTrigger,
} from "raft-ui";

<NotificationCenter>
  <NotificationCenterTrigger />
  <NotificationCenterPopup>
    <NotificationCenterHeader>
      <NotificationCenterTitle />
      <NotificationCenterCount />
    </NotificationCenterHeader>
    <NotificationCenterScroller>
      <NotificationCenterList>
        <NotificationCenterItem>
          <NotificationCenterItemRow>
            <NotificationCenterItemIcon />
            <NotificationCenterItemContent>
              <NotificationCenterItemTitle />
              <NotificationCenterItemBody />
              <NotificationCenterItemActions>
                <NotificationCenterActionButton />
              </NotificationCenterItemActions>
            </NotificationCenterItemContent>
          </NotificationCenterItemRow>
        </NotificationCenterItem>
      </NotificationCenterList>
    </NotificationCenterScroller>
  </NotificationCenterPopup>
</NotificationCenter>

Usage#

Empty state#WIP

API#WIP

NotificationCenter#

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state owned by Base UI Popover.Root.
`defaultOpen`	boolean	false	Initial open state for uncontrolled usage.
`modal`	boolean \| "trap-focus"	false	Defaults to non-modal to match the source rail/navbar floating popup.
`onOpenChange`	Popover.Root.Props['onOpenChange']	—	Called when trigger, Escape, or outside press changes open state.
`...props`	Base UI Popover.Root.Props	—	Root popover props. Compose trigger, popup, and notification parts as children.

NotificationCenterTrigger#

Prop	Type	Default	Description
`...props`	Base UI Popover.Trigger.Props	—	Trigger affordance and positioning anchor. Use render to compose a custom icon button; defaults to the themed bell/attention control.

NotificationCenterPopup#

Prop	Type	Default	Description
`viewport`	"desktop" \| "mobile"	"desktop"	desktop = fixed width; mobile = viewport-capped width.
`size`	"sm" \| "md" \| "lg"	"md"	Frame height token. Desktop uses fixed heights; mobile uses max-height tokens.
`side`	"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"	"bottom"	Anchored placement relative to the trigger, forwarded to Base UI Popover.Positioner.
`align`	"start" \| "center" \| "end"	"center"	Alignment along the anchored side, forwarded to Base UI Popover.Positioner.
`positionMethod`	"fixed" \| "absolute"	"fixed"	Positioning strategy for the popup. The popup bundles Portal, Positioner, and Popup internally.
`sideOffset`	number	4	Gap between the trigger and the popup edge.
`collisionAvoidance`	CollisionAvoidance	—	How the popup avoids viewport edges when space runs out.
`portalProps`	Base UI Popover.Portal.Props	—	Optional portal options (e.g. container) forwarded to the internal portal.
`...props`	Base UI Popover.Popup.Props	—	The visual card. Popup owns the border, shadow, background, portal, and positioner.

NotificationCenterHeader#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Header row for title and count.

NotificationCenterTitle#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Panel title text.

NotificationCenterCount#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Trailing count or clear-all label in the header.

NotificationCenterScroller#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Scroll boundary for the list or empty state.

NotificationCenterList#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"ul">	—	Notification list. Defaults to aria-label='Notifications'.

NotificationCenterItem#

Prop	Type	Default	Description
`read`	boolean	false	Applies the source read opacity treatment.
`...props`	useRender.ComponentProps<"li">	—	List item root. Compose row, icon, and content parts as children.

NotificationCenterItemRow#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Horizontal layout for icon and content.

NotificationCenterItemIcon#

Prop	Type	Default	Description
`status`	"error" \| "warning" \| "info" \| "success"	"info"	Applies the notification status color and default icon when children are omitted.
`...props`	useRender.ComponentProps<"div">	—	Status icon slot. Pass children to replace the default glyph.

NotificationCenterItemContent#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Flexible column for title, body, and actions.

NotificationCenterItemTitle#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Notification title text.

NotificationCenterItemBody#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Supporting body copy under the title.

NotificationCenterItemActions#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Trailing action row for NotificationCenterActionButton children.

NotificationCenterActionButton#

Prop	Type	Default	Description
`variant`	"primary" \| "secondary"	"secondary"	Maps notification actions to the shared Button primary/outline variants.
`...props`	ButtonProps	—	Button attributes. Size is fixed to xs; className merges with the action recipe.

NotificationCenterEmptyState#

Prop	Type	Default	Description
`...props`	EmptyStateProps	—	Semantic empty-state root. Compose EmptyStateContent with EmptyStateIcon, EmptyStateTitle, and EmptyStateDescription.