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/dismiss-icon.json
{
"name": "DismissIcon",
"tagName": "noora-dismiss-icon",
"elementClassName": "NooraDismissIcon",
"className": "noora-dismiss-icon",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Provides a compact, accessible dismiss button.",
"usage": "<noora-dismiss-icon></noora-dismiss-icon>",
"attributes": [
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "large"],
"default": "large",
"description": "Controls the icon dimensions."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables the button."
},
{
"name": "label",
"property": "label",
"type": "string",
"default": "Dismiss",
"description": "Sets the accessible label."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "button",
"description": "The native button."
}
],
"events": [
{
"name": "noora-dismiss",
"type": "CustomEvent<Record<string, never>>",
"description": "Emitted when the dismiss control is activated."
}
],
"notes": ["Activation emits a `noora-dismiss` event."],
"examples": [
{
"id": "sizes",
"title": "Sizes",
"description": "Use the size that matches the surrounding surface.",
"markup": "<noora-dismiss-icon size=\"small\"></noora-dismiss-icon>\n<noora-dismiss-icon size=\"large\"></noora-dismiss-icon>"
},
{
"id": "states",
"title": "States",
"description": "Compare enabled and disabled controls.",
"markup": "<noora-dismiss-icon label=\"Dismiss notification\"></noora-dismiss-icon>\n<noora-dismiss-icon label=\"Dismiss notification\" disabled></noora-dismiss-icon>"
},
{
"id": "events",
"title": "Dismiss events",
"description": "Listen for the noora-dismiss event when the control is activated.",
"markup": "<noora-dismiss-icon size=\"small\" label=\"Remove item\"></noora-dismiss-icon>\n<noora-dismiss-icon size=\"large\" label=\"Close panel\"></noora-dismiss-icon>"
}
]
}