{ "element": "nve-alert", "entrypoint": "@nvidia-elements/core/alert/alert.examples.json", "items": [ { "id": "alert", "name": "Default", "template": "alert message\n", "summary": "Basic alert for inline informational messages. Use alerts for persistent feedback that doesn't auto-dismiss, ideal for system status updates, or contextual information that users may need to reference while completing tasks.", "description": "", "composition": false, "tags": [] }, { "id": "alert-support-status", "name": "SupportStatus", "template": "
\n Standard\n Accent\n Warning\n Success\n Danger\n
\n", "summary": "Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress.", "description": "", "composition": false, "tags": [] }, { "id": "alert-status", "name": "Status", "template": "
\n Standard\n Accent\n Warning\n Success\n Danger\n Scheduled\n Queued\n Finished\n Failed\n Unknown\n Pending\n Starting\n Running\n Restarting\n Stopping\n Ignored\n
\n", "summary": "Extended status variants for workflow and process state communication. Use these specialized states (scheduled, queued, running, failed, etc.) in dashboards, build pipelines, or task management interfaces where users need detailed visibility into process lifecycle stages.", "description": "", "composition": false, "tags": [] }, { "id": "alert-group", "name": "GroupDefault", "template": "\n alert message\n\n", "summary": "Alert group for visually organizing related messages with shared styling. Use alert groups to present many related messages as a cohesive unit, improving scannability and visual hierarchy.", "description": "", "composition": false, "tags": [] }, { "id": "alert-group-status", "name": "GroupStatus", "template": "
\n \n Standard\n Standard\n \n \n Accent\n Accent\n \n \n Warning\n Warning\n \n \n Success\n Success\n \n \n Danger\n Danger\n \n
\n", "summary": "Alert groups with inherited status styling for all children. Applying status at the group level ensures visual consistency across related messages, perfect for form validation where many fields share the same error context.", "description": "", "composition": false, "tags": [] }, { "id": "alert-invoker-command", "name": "InvokerCommand", "template": "\n \n Alert Notification Message 1\n \n \n \n Alert Notification Message 2\n \n \n\n", "summary": "Dismissible alerts using the Invoker Command API for declarative close behavior. Use `commandfor` and `command=\"--close\"` on action buttons to dismiss individual alerts without custom JavaScript event handling.", "description": "", "composition": false, "tags": [] }, { "id": "alert-closable", "name": "Closable", "template": "
\n \n Standard\n Standard\n \n \n Accent\n Accent\n \n \n Warning\n Warning\n \n \n Success\n Success\n \n \n Danger\n Danger\n \n
\n", "summary": "Closable alerts that users can dismiss. Use closable alerts for messages that become irrelevant after reading (like onboarding tips, one-time announcements, or acknowledged warnings), but avoid for critical errors that need to remain visible until resolved.", "description": "", "composition": false, "tags": [] }, { "id": "alert-actions", "name": "Actions", "template": "
\n \n Standard action \n \n \n Standard action \n \n \n Warning action \n \n \n Success action \n \n \n Danger action \n \n
\n", "summary": "Alerts with action buttons for immediate user response. Include actions when the alert requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.", "description": "", "composition": false, "tags": [] }, { "id": "alert-prominence", "name": "Prominence", "template": "
\n \n Standard banner message\n view details\n \n \n Accent banner message\n view details\n \n \n Warning banner message\n view details\n \n \n Success banner message\n view details\n \n \n Danger banner message\n view details\n \n
\n", "summary": "High-prominence alerts with emphasis styling for full-width banners. Use prominence=\"emphasis\" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.", "description": "", "composition": false, "tags": [] }, { "id": "alert-content", "name": "Content", "template": "\n \n Session Paused:\n
\n

Failed to verify drives.

\n 
\n10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n
\n Collapse Details\n \n\n", "summary": "Alert with complex structured content including expandable details. Use the content slot for rich information like stack traces, validation summaries, or detailed error logs where users need both the high-level message and access to technical details for debugging or reporting.", "description": "", "composition": false, "tags": [] }, { "id": "alert-color", "name": "Color", "template": "
\n \n red-cardinal\n \n \n gray-slate\n \n \n gray-denim\n \n \n blue-indigo\n \n \n blue-cobalt\n \n \n blue-sky\n \n \n teal-cyan\n \n \n green-mint\n \n \n teal-seafoam\n \n \n green-grass\n \n \n yellow-amber\n \n \n orange-pumpkin\n \n \n red-tomato\n \n \n pink-magenta\n \n \n purple-plum\n \n \n purple-violet\n \n \n purple-lavender\n \n \n pink-rose\n \n \n green-jade\n \n \n lime-pear\n \n \n yellow-nova\n \n \n brand-green\n \n
\n", "summary": "Custom color variants for brand-specific styling or extra visual differentiation beyond standard status colors. Use custom colors when standard semantic colors don't match your use case, such as category labels, team assignments, or brand-specific messaging.", "description": "", "composition": false, "tags": [ "test-case" ] }, { "id": "alert-custom-color-combinations", "name": "CustomColorCombinations", "template": "
\n \n Custom color will theme the closable icon.\n \n \n \n Custom color is compatible with actions button.\n action\n \n \n \n Combining custom color=\"pink-rose\" with status yields\n the status icon with custom alert color.\n \n \n Combining custom color=\"pink-rose\" with status yields\n the status icon with custom alert color.\n \n \n Combining custom color=\"pink-rose\" with status yields\n the status icon with custom alert color.\n \n \n Combining custom color=\"pink-rose\" with status yields\n the status icon with custom alert color.\n \n \n Combining custom color=\"blue-indigo\" with status and\n prominence yields the status icon with an emphasized custom alert\n color.\n \n \n Combining custom color=\"blue-indigo\" with status and\n prominence yields the status icon with an emphasized custom alert\n color.\n \n \n Combining custom color=\"blue-indigo\" with status and\n prominence yields the status icon with an emphasized custom alert\n color.\n \n \n Combining custom color=\"blue-indigo\" with status and\n prominence yields the status icon with an emphasized custom alert\n color.\n \n
\n", "summary": "Custom color combinations with status icons and prominence for advanced theming. Custom colors interact with status icons and emphasis styling, useful for maintaining brand consistency while preserving semantic meaning through status indicators.", "description": "", "composition": false, "tags": [ "test-case" ] } ] }