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/button.json
{
"name": "Button",
"tagName": "noora-button",
"elementClassName": "NooraButton",
"className": "noora-button",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Triggers an action, submits a form, or navigates to another location.",
"usage": "<noora-button type=\"button\">Create project</noora-button>",
"attributes": [
{
"name": "aria-describedby",
"property": "_ariaDescribedBy",
"publicProperty": false,
"type": "string",
"description": "Identifies the element that describes the button."
},
{
"name": "aria-label",
"property": "_ariaLabel",
"publicProperty": false,
"type": "string",
"description": "Provides an accessible name when visible text is unavailable."
},
{
"name": "aria-labelledby",
"property": "_ariaLabelledBy",
"publicProperty": false,
"type": "string",
"description": "Identifies the element that labels the button."
},
{
"name": "title",
"property": "_title",
"publicProperty": false,
"type": "string",
"description": "Provides advisory information for the button."
},
{
"name": "autofocus",
"property": "autofocus",
"type": "boolean",
"default": false,
"description": "Focuses the button when the page loads."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Prevents activation and form submission."
},
{
"name": "download",
"property": "download",
"type": "string",
"description": "Downloads the linked resource, optionally using this value as the filename."
},
{
"name": "form",
"property": "formId",
"type": "string",
"description": "Associates the button with a form by element identifier."
},
{
"name": "formaction",
"property": "formAction",
"type": "string",
"description": "Overrides the associated form action for this submit button."
},
{
"name": "formenctype",
"property": "formEnctype",
"type": "string",
"description": "Overrides the associated form encoding type for this submit button."
},
{
"name": "formmethod",
"property": "formMethod",
"type": "string",
"description": "Overrides the associated form method for this submit button."
},
{
"name": "formnovalidate",
"property": "formNoValidate",
"type": "boolean",
"default": false,
"description": "Skips validation when this button submits its associated form."
},
{
"name": "formtarget",
"property": "formTarget",
"type": "string",
"description": "Overrides where the associated form response is displayed."
},
{
"name": "href",
"property": "href",
"type": "string",
"default": "",
"description": "Renders the control as a link to this location."
},
{
"name": "icon-only",
"property": "iconOnly",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Uses the default slot as the entire button content. An accessible label is required."
},
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Provides fallback text when the default slot is empty."
},
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Sets the form field name submitted with the button value."
},
{
"name": "rel",
"property": "rel",
"type": "string",
"description": "Sets the relationship between the current page and a linked resource."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "medium", "large"],
"default": "large",
"description": "Controls the button dimensions and text size."
},
{
"name": "target",
"property": "target",
"type": "string",
"description": "Controls where a linked resource is opened."
},
{
"name": "type",
"property": "type",
"type": "string",
"values": ["button", "reset", "submit"],
"default": "submit",
"description": "Controls native button behavior when href is absent."
},
{
"name": "value",
"property": "value",
"type": "string",
"default": "",
"description": "Sets the form value submitted with the button name."
},
{
"name": "variant",
"property": "variant",
"type": "string",
"values": ["primary", "secondary", "destructive"],
"default": "primary",
"description": "Controls the visual emphasis and semantic intent."
}
],
"readonlyProperties": [
{
"name": "control",
"type": "HTMLAnchorElement | HTMLButtonElement | null",
"description": "The native link or button rendered inside the component."
},
{
"name": "form",
"type": "HTMLFormElement | null",
"description": "The form associated with the button, if one exists."
}
],
"slots": [
{
"name": "",
"description": "The visible label, or the complete content when icon-only is present."
},
{
"name": "icon-left",
"description": "An icon displayed before the label."
},
{
"name": "icon-right",
"description": "An icon displayed after the label."
}
],
"cssParts": [
{
"name": "control",
"description": "The native link or button control."
}
],
"stylingExample": "noora-button::part(control) {\n inline-size: 100%;\n}",
"notes": [
"The component emits the standard browser click event.",
"It renders a native link when href is present and the component is enabled. Otherwise, it renders a native button and supports form submission and reset."
],
"examples": [
{
"id": "variants",
"title": "Variants",
"description": "Choose a semantic variant through the variant attribute.",
"markup": "<noora-button type=\"button\" variant=\"primary\">Primary</noora-button>\n<noora-button type=\"button\" variant=\"secondary\">Secondary</noora-button>\n<noora-button type=\"button\" variant=\"destructive\">Destructive</noora-button>"
},
{
"id": "sizes",
"title": "Sizes",
"description": "Compare the large, medium, and small button sizes.",
"markup": "<noora-button type=\"button\" size=\"large\">Large</noora-button>\n<noora-button type=\"button\" size=\"medium\">Medium</noora-button>\n<noora-button type=\"button\" size=\"small\">Small</noora-button>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "Compare the disabled state across every button variant.",
"markup": "<noora-button type=\"button\" variant=\"primary\" disabled>Disabled</noora-button>\n<noora-button type=\"button\" variant=\"secondary\" disabled>Disabled</noora-button>\n<noora-button type=\"button\" variant=\"destructive\" disabled>Disabled</noora-button>"
},
{
"id": "icons",
"title": "Icons",
"description": "Place a chevron on the left, right, or both sides of the label, or render an icon-only button.",
"markup": "<noora-button type=\"button\">\n <noora-icon slot=\"icon-left\" name=\"chevron_left\"></noora-icon>\n Icon\n</noora-button>\n\n<noora-button type=\"button\">\n Icon\n <noora-icon slot=\"icon-right\" name=\"chevron_right\"></noora-icon>\n</noora-button>\n\n<noora-button type=\"button\">\n <noora-icon slot=\"icon-left\" name=\"chevron_left\"></noora-icon>\n Icon\n <noora-icon slot=\"icon-right\" name=\"chevron_right\"></noora-icon>\n</noora-button>\n\n<noora-button type=\"button\" icon-only aria-label=\"Previous\">\n <noora-icon name=\"chevron_left\"></noora-icon>\n</noora-button>"
}
]
}