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/alert.json
{
"name": "Alert",
"tagName": "noora-alert",
"elementClassName": "NooraAlert",
"className": "noora-alert",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Communicates contextual information with a semantic status.",
"usage": "<noora-alert status=\"success\" title=\"Project created\"></noora-alert>",
"attributes": [
{
"name": "type",
"property": "type",
"type": "string",
"values": ["primary", "secondary"],
"default": "primary",
"description": "Controls the visual emphasis."
},
{
"name": "status",
"property": "status",
"type": "string",
"values": ["information", "warning", "error", "success"],
"default": "information",
"description": "Sets the semantic status."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "medium", "large"],
"default": "medium",
"description": "Controls the alert dimensions and content layout."
},
{
"name": "dismissible",
"property": "dismissible",
"type": "boolean",
"default": false,
"description": "Shows a dismiss control."
},
{
"name": "show-icon",
"property": "showIcon",
"type": "boolean",
"default": true,
"description": "Shows the semantic status icon."
},
{
"name": "title",
"property": "title",
"type": "string",
"default": "",
"description": "Sets the alert title."
},
{
"name": "description",
"property": "description",
"type": "string",
"description": "Sets the description shown by large alerts."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "",
"description": "Rich description content that takes precedence over the description attribute."
},
{
"name": "action",
"description": "Actions displayed beside or below the title."
}
],
"cssParts": [
{
"name": "alert",
"description": "The alert container."
},
{
"name": "title",
"description": "The title."
},
{
"name": "description",
"description": "The description."
},
{
"name": "actions",
"description": "The action container."
}
],
"events": [
{
"name": "noora-dismiss",
"type": "CustomEvent<Record<string, never>>",
"description": "Emitted after the alert is dismissed."
}
],
"notes": [
"A dismiss action emits a `noora-dismiss` event and hides the element."
],
"examples": [
{
"id": "types",
"title": "Types",
"description": "Use primary alerts by default and secondary alerts for lower emphasis.",
"markup": "<noora-alert type=\"primary\" status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert type=\"secondary\" status=\"error\" title=\"Insert your text here\"></noora-alert>"
},
{
"id": "sizes",
"title": "Sizes",
"description": "Choose a compact, standard, or descriptive layout.",
"markup": "<noora-alert size=\"small\" status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert size=\"medium\" status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert size=\"large\" status=\"error\" title=\"Insert your text here\" description=\"Insert your description here. Description in this case is usually two lines\"></noora-alert>"
},
{
"id": "primary-statuses",
"title": "Primary statuses",
"description": "Primary alerts support error, information, success, and warning states.",
"markup": "<noora-alert status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert status=\"information\" title=\"Insert your text here\"></noora-alert>\n<noora-alert status=\"success\" title=\"Insert your text here\"></noora-alert>\n<noora-alert status=\"warning\" title=\"Insert your text here\"></noora-alert>"
},
{
"id": "secondary-statuses",
"title": "Secondary statuses",
"description": "Secondary alerts provide the same semantic states with lower emphasis.",
"markup": "<noora-alert type=\"secondary\" status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert type=\"secondary\" status=\"information\" title=\"Insert your text here\"></noora-alert>\n<noora-alert type=\"secondary\" status=\"success\" title=\"Insert your text here\"></noora-alert>\n<noora-alert type=\"secondary\" status=\"warning\" title=\"Insert your text here\"></noora-alert>"
},
{
"id": "dismissible",
"title": "Dismissible",
"description": "Dismiss controls are available in every alert size.",
"markup": "<noora-alert dismissible size=\"small\" status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert dismissible size=\"medium\" status=\"error\" title=\"Insert your text here\"></noora-alert>\n<noora-alert dismissible size=\"large\" status=\"error\" title=\"Insert your text here\" description=\"Insert your description here. Description in this case is usually two lines\"></noora-alert>"
},
{
"id": "actions",
"title": "Actions",
"description": "Place related actions in the action slot for compact or descriptive alerts.",
"markup": "<noora-alert size=\"small\" status=\"error\" title=\"Insert your text here\">\n <noora-link-button slot=\"action\" size=\"medium\" variant=\"secondary\" underline label=\"Action\"></noora-link-button>\n</noora-alert>\n<noora-alert size=\"large\" status=\"error\" title=\"Insert your text here\" description=\"Insert your description here. Description in this case is usually two lines\">\n <noora-link-button slot=\"action\" size=\"large\" variant=\"secondary\" underline label=\"Action\"></noora-link-button>\n</noora-alert>"
},
{
"id": "edge-cases",
"title": "Edge cases",
"description": "Long content and combined actions preserve the alert layout.",
"markup": "<noora-alert status=\"information\" title=\"This is a very long title that might wrap to multiple lines in smaller containers or on mobile devices to test text wrapping behavior\"></noora-alert>\n<noora-alert size=\"large\" status=\"warning\" title=\"Important Notice\" description=\"This is a very long description that contains multiple sentences and important information. It should properly wrap and maintain readability even when the content extends beyond the typical two-line description. This helps test the layout behavior with extensive content.\"></noora-alert>\n<noora-alert dismissible size=\"medium\" status=\"success\" title=\"Operation completed successfully\">\n <noora-link-button slot=\"action\" size=\"medium\" variant=\"secondary\" underline label=\"View Details\"></noora-link-button>\n <noora-link-button slot=\"action\" size=\"medium\" variant=\"secondary\" underline label=\"Dismiss\"></noora-link-button>\n</noora-alert>"
}
]
}