All Docs
FeaturesDepositClearUpdated March 12, 2026

Notifications Panel: Inline Quick-Action Buttons

Notifications Panel: Inline Quick-Action Buttons

Available from: v0.1.215

The Notifications slide-over now lets you resolve common time-sensitive notifications in a single tap — no navigation required.

Overview

For notifications that demand fast action (e.g. an overdue deposit protection or a tenant's reply to a deduction proposal), the notification row itself now displays small pill-style action buttons directly beneath the notification body.

This eliminates the previous multi-step flow:

❌ Before: Open panel → click notification → navigate → act → go back  (~5 taps)
✅ After:  Open panel → tap action button  (~1 tap)

Notification types & contextual actions

Each notification type exposes 1–2 relevant actions:

deposit_overdue

Triggered when a deposit has not been protected within the legally required window.

  • Protect deposit now — opens the deposit protection flow directly
  • Dismiss — marks the notification as read

negotiation_reply

Triggered when a tenant responds to a deduction proposal.

  • Open negotiation thread — navigates to the active negotiation
  • Dismiss — marks the notification as read

compliance_fail

Triggered when a compliance check fails on a tenancy.

  • View tenancy — opens the tenancy record
  • Dismiss — marks the notification as read

signature_request

Triggered when a document is awaiting a signature.

  • View tenancy — opens the tenancy record
  • Snooze 24h — suppresses the notification for 24 hours

Universal actions

All notification types support the following base actions:

ActionBehaviour
ViewNavigates to the page linked in the notification
DismissMarks the notification as read and removes it from the unread count
Snooze 24hHides the notification for 24 hours, then resurfaces it

Schema: actions field

The notification data model now includes an optional actions array. Each action object contains:

type NotificationAction = {
  label: string;        // Button label, e.g. "Protect deposit now"
  variant: 'primary' | 'secondary' | 'ghost';
  action: 'navigate' | 'mark_read' | 'snooze_24h' | string;
  href?: string;        // Required when action === 'navigate'
};

type Notification = {
  // ...existing fields
  actions?: NotificationAction[];  // Optional — up to 2 items
};

The actions field is optional. Notifications without it render exactly as before (no pill buttons shown).

UI behaviour

  • Action buttons are rendered as small pill buttons below the notification body text.
  • A maximum of 2 action buttons are shown per notification row to avoid clutter.
  • Buttons are visible immediately — no hover or expand required.
  • Performing any action (including Dismiss or Snooze) collapses that notification row's action strip to avoid repeated interaction.

Related component

src/components/notification-slide-over.tsx