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/link-button.json
{
"name": "LinkButton",
"tagName": "noora-link-button",
"elementClassName": "NooraLinkButton",
"className": "noora-link-button",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Presents a text-oriented button or link.",
"previewLayout": "stack-center",
"usage": "<noora-link-button href=\"/docs\" label=\"Documentation\"></noora-link-button>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the visible label."
},
{
"name": "variant",
"property": "variant",
"type": "string",
"values": ["primary", "secondary", "destructive"],
"default": "primary",
"description": "Controls semantic emphasis."
},
{
"name": "size",
"property": "size",
"type": "string",
"values": ["small", "medium", "large"],
"default": "large",
"description": "Controls dimensions."
},
{
"name": "href",
"property": "href",
"type": "string",
"description": "Renders a native link to this location."
},
{
"name": "underline",
"property": "underline",
"type": "boolean",
"default": false,
"description": "Underlines the label."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables activation."
}
],
"readonlyProperties": [],
"slots": [
{
"name": "icon-left",
"description": "An icon before the label."
},
{
"name": "icon-right",
"description": "An icon after the label."
}
],
"cssParts": [
{
"name": "control",
"description": "The native link or button."
}
],
"notes": [],
"examples": [
{
"id": "variants",
"title": "Variant",
"description": "Match the LiveView primary, secondary, and destructive variations.",
"markup": "<noora-link-button href=\"#\" label=\"Primary\" variant=\"primary\"></noora-link-button>\n<noora-link-button href=\"#\" label=\"Secondary\" variant=\"secondary\"></noora-link-button>\n<noora-link-button href=\"#\" label=\"Destructive\" variant=\"destructive\"></noora-link-button>"
},
{
"id": "sizes",
"title": "Size",
"description": "Match the LiveView large, medium, and small variations.",
"markup": "<noora-link-button href=\"#\" label=\"Large\" size=\"large\"></noora-link-button>\n<noora-link-button href=\"#\" label=\"Medium\" size=\"medium\"></noora-link-button>\n<noora-link-button href=\"#\" label=\"Small\" size=\"small\"></noora-link-button>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "Disable the primary link button.",
"markup": "<noora-link-button label=\"Disabled\" variant=\"primary\" disabled></noora-link-button>"
},
{
"id": "underline",
"title": "Underline",
"description": "Render an underlined link button.",
"markup": "<noora-link-button href=\"#\" label=\"Underline\" underline></noora-link-button>"
},
{
"id": "icons",
"title": "Icon",
"description": "Match the LiveView left, right, and two-sided icon variations.",
"markup": "<noora-link-button href=\"#\" label=\"Icon\"><noora-icon slot=\"icon-left\" name=\"chevron_left\"></noora-icon></noora-link-button>\n<noora-link-button href=\"#\" label=\"Icon\"><noora-icon slot=\"icon-right\" name=\"chevron_right\"></noora-icon></noora-link-button>\n<noora-link-button href=\"#\" label=\"Icon\"><noora-icon slot=\"icon-left\" name=\"chevron_left\"></noora-icon><noora-icon slot=\"icon-right\" name=\"chevron_right\"></noora-icon></noora-link-button>"
}
]
}