{
"element": "nve-badge",
"entrypoint": "@nvidia-elements/core/badge/badge.examples.json",
"items": [
{
"id": "badge",
"name": "Default",
"template": "badge\n",
"summary": "Basic badge component with default styling. Use for simple non-interactive labels or status indicators.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "badge-status",
"name": "Status",
"template": "\n scheduled\n queued\n pending\n starting\n running\n restarting\n stopping\n finished\n failed\n unknown\n ignored\n
\n",
"summary": "Badges with predefined status colors for different states. Ideal for showing job status, task progress, or system states.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "badge-status-flat",
"name": "StatusFlat",
"template": "\n scheduled\n queued\n pending\n starting\n running\n restarting\n stopping\n finished\n failed\n unknown\n ignored\n
\n",
"summary": "Flat container badges with status colors for a more subtle appearance. Perfect for dense layouts or when you want less visual weight.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "badge-status-icon",
"name": "StatusIcon",
"template": "\n \n \n \n \n \n \n \n \n \n \n \n
\n",
"summary": "Status badges with icons only, using aria-label for accessibility. Useful for compact status indicators in toolbars or data tables.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "badge-support",
"name": "Support",
"template": "\n accent\n warning\n success\n danger\n
\n",
"summary": "Support status badges for general feedback states. Use for success, warning, error, or informational messages.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "badge-status-light-theme",
"name": "StatusLightTheme",
"template": "\n scheduled\n queued\n pending\n starting\n running\n restarting\n stopping\n finished\n failed\n unknown\n ignored\n
\n",
"summary": "Status badges in light theme for better visibility on light backgrounds. Use when your application primarily uses light mode.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "badge-status-dark-theme",
"name": "StatusDarkTheme",
"template": "\n scheduled\n queued\n pending\n starting\n running\n restarting\n stopping\n finished\n failed\n unknown\n ignored\n
\n",
"summary": "Status badges in dark theme for better visibility on dark backgrounds. Use when your application primarily uses dark mode.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "badge-trend",
"name": "Trend",
"template": "\n 0%\n -15%\n +15%\n
\n",
"summary": "Trend badges for displaying data changes and metrics. Perfect for dashboards, analytics, or financial data showing positive, negative, or neutral trends.",
"description": "",
"composition": false,
"tags": [
"pattern",
"test-case"
]
},
{
"id": "badge-color",
"name": "Color",
"template": "\n red-cardinal\n gray-slate\n gray-denim\n blue-indigo\n blue-cobalt\n blue-sky\n teal-cyan\n green-mint\n teal-seafoam\n green-grass\n yellow-amber\n orange-pumpkin\n red-tomato\n pink-magenta\n purple-plum\n purple-violet\n purple-lavender\n pink-rose\n green-jade\n lime-pear\n yellow-nova\n brand-green\n
\n",
"summary": "Badges with color variants for categorization and theming. Use for organizing content by color-coded categories.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "badge-prominence",
"name": "Prominence",
"template": "\n red-cardinal\n gray-slate\n gray-denim\n blue-indigo\n blue-cobalt\n blue-sky\n teal-cyan\n green-mint\n teal-seafoam\n green-grass\n yellow-amber\n orange-pumpkin\n red-tomato\n pink-magenta\n purple-plum\n purple-violet\n purple-lavender\n pink-rose\n green-jade\n lime-pear\n yellow-nova\n brand-green\n
\n",
"summary": "High emphasis badges with custom colors for important or highlighted content. Use for highlighting critical information.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "badge-flat",
"name": "Flat",
"template": "\n red-cardinal\n gray-slate\n gray-denim\n blue-indigo\n blue-cobalt\n blue-sky\n teal-cyan\n green-mint\n teal-seafoam\n green-grass\n yellow-amber\n orange-pumpkin\n red-tomato\n pink-magenta\n purple-plum\n purple-violet\n purple-lavender\n pink-rose\n green-jade\n lime-pear\n yellow-nova\n brand-green\n
\n",
"summary": "Flat container badges with custom colors for a minimal, borderless appearance. Ideal for subtle categorization or when you want to reduce visual noise.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "badge-overflow",
"name": "Overflow",
"template": "some really long content\n",
"summary": "Badge with constrained width to show text overflow behavior. Use when you need to control badge width in constrained layouts or responsive designs.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
}
]
}