Notification Cards
The Notification Cards preset provides structured alert blocks for delivering contextual updates. Perfect for activity feeds, dashboards, or inbox-like UIs.
Quick Links
Installation
Install the presets individually or as part of the complete @aristobyte-ui library.
Installation of Notification Cards
Install the Notification Cards preset individually. Skip this step if @aristobyte-ui is globally available.
Package Manager
Individual Package
Install only the presets if you need specific functionality.
Full Library
Skip this if you have the complete @aristobyte-ui already installed.
Import
Choose between individual package imports or global library imports based on your project's needs and bundle size requirements.
Import Notification Cards
Import Notification Cards to surface time-sensitive messages with consistent styling and hierarchy. Configurable with icons and action buttons.
Import Method
Individual Package
Import directly from the presets package for optimal tree-shaking and smaller bundle sizes.
Recommended for component-specific usage
Global Library
Import from the main library package when using multiple components from AristoByte UI.
Recommended for component-specific usage
Basic Usage Example
Basic implementation of the component using default properties. Suitable for general-purpose interactions.
Disabled
Renders Notification Cards in a disabled or muted state when actions (acknowledge, snooze, open) are not available due to policy, rate-limits, or remote state.
Preview
Guidelines
Disable notification actions when messages are archived or when the server indicates read-only mode.
Mute interactive controls during bulk operations to avoid partial updates.
Disable actions for notifications that are pending moderation or legal review.
Temporarily disable action buttons when notification payloads are malformed to avoid errors.
State Management
Show a succinct reason for disabled actions (e.g., 'Action unavailable — moderation in progress').
Maintain the ability to view notification details even when actions are disabled to preserve context.
Expose telemetry for disabled action attempts to identify friction points and policy impacts.
Gracefully degrade available controls and provide alternative workflows when primary actions are disabled.
UX & Instrumentation
Props Reference
Complete reference for all props available on NotificationCards component(s), including type definitions, default values, and usage examples.
NotificationCards
Core Props
children
React.ReactNode | stringdefault: ''