Notification List Swipe Dismiss

ProNew

A list of notifications with unread markers, tap to mark read, a swipe or arrow key to dismiss, a Clear all button and an empty state. Use this when a phone app has a notifications screen where people clear items one by one or all at once.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a phone app has a notifications screen where people clear items one by one or all at once.

Do not use it for a transient toast, or for an audit log that must keep every entry.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`items`	`Notice[]`	`required`	`{ id, title, body, time, read? }`.
`onChange`	`(items: Notice[]) => void`	`-`	Called after every change.

Accessibility

Unread is spoken ("Unread") and shown as a dot, not colour alone; opening a row marks it read.
Dismiss is the trailing action on a focused row (Left or Right arrow); Clear all is a visible button.
Changes are announced ("3 notifications", "All cleared").

Testing

The pattern ships with a Testing Library test (notification-list-swipe-dismiss.test.tsx) that drives it through roles and the keyboard.