Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/status-badge.json
{
"name": "StatusBadge",
"tagName": "noora-status-badge",
"elementClassName": "NooraStatusBadge",
"className": "noora-status-badge",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Displays a compact workflow status with a semantic icon or dot.",
"usage": "<noora-status-badge status=\"success\" label=\"Complete\"></noora-status-badge>",
"attributes": [
{
"name": "type",
"property": "type",
"type": "string",
"values": ["icon", "dot"],
"default": "icon",
"description": "Chooses a semantic icon or a dot indicator."
},
{
"name": "status",
"property": "status",
"type": "string",
"values": [
"success",
"error",
"warning",
"attention",
"disabled",
"in_progress"
],
"default": "success",
"description": "Sets the semantic status."
},
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the visible label."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Custom label content that takes precedence over the label attribute."
}
],
"cssParts": [
{
"name": "badge",
"description": "The status badge container."
},
{
"name": "icon",
"description": "The semantic icon or dot."
},
{
"name": "label",
"description": "The visible label."
}
],
"notes": [],
"examples": [
{
"id": "statuses",
"title": "Statuses",
"description": "Communicate workflow state with a semantic icon.",
"markup": "<noora-status-badge status=\"success\" label=\"Complete\"></noora-status-badge>\n<noora-status-badge status=\"error\" label=\"Failed\"></noora-status-badge>\n<noora-status-badge status=\"warning\" label=\"Warning\"></noora-status-badge>\n<noora-status-badge status=\"attention\" label=\"Needs attention\"></noora-status-badge>\n<noora-status-badge status=\"in_progress\" label=\"Running\"></noora-status-badge>"
},
{
"id": "dots",
"title": "Dot indicators",
"description": "Use dots when the icon shape is unnecessary.",
"markup": "<noora-status-badge type=\"dot\" status=\"success\" label=\"Complete\"></noora-status-badge>\n<noora-status-badge type=\"dot\" status=\"error\" label=\"Failed\"></noora-status-badge>\n<noora-status-badge type=\"dot\" status=\"warning\" label=\"Pending\"></noora-status-badge>\n<noora-status-badge type=\"dot\" status=\"attention\" label=\"Needs attention\"></noora-status-badge>\n<noora-status-badge type=\"dot\" status=\"in_progress\" label=\"Running\"></noora-status-badge>"
}
]
}