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
docs/components/linkbutton.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# LinkButton
Presents a text-oriented button or link.
```html
<noora-link-button href="/docs" label="Documentation"></noora-link-button>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `""` | Sets the visible label. |
| `variant` | `primary`, `secondary`, `destructive` | `"primary"` | Controls semantic emphasis. |
| `size` | `small`, `medium`, `large` | `"large"` | Controls dimensions. |
| `href` | `string` | None | Renders a native link to this location. |
| `underline` | `boolean` | `false` | Underlines the label. |
| `disabled` | `boolean` | `false` | Disables activation. |
## Slots
| Slot | Description |
| --- | --- |
| `icon-left` | An icon before the label. |
| `icon-right` | An icon after the label. |
## Styling parts
| Part | Description |
| --- | --- |
| `control` | The native link or button. |
## Variant
Match the LiveView primary, secondary, and destructive variations.
```html
<noora-link-button href="#" label="Primary" variant="primary"></noora-link-button>
<noora-link-button href="#" label="Secondary" variant="secondary"></noora-link-button>
<noora-link-button href="#" label="Destructive" variant="destructive"></noora-link-button>
```
## Size
Match the LiveView large, medium, and small variations.
```html
<noora-link-button href="#" label="Large" size="large"></noora-link-button>
<noora-link-button href="#" label="Medium" size="medium"></noora-link-button>
<noora-link-button href="#" label="Small" size="small"></noora-link-button>
```
## Disabled
Disable the primary link button.
```html
<noora-link-button label="Disabled" variant="primary" disabled></noora-link-button>
```
## Underline
Render an underlined link button.
```html
<noora-link-button href="#" label="Underline" underline></noora-link-button>
```
## Icon
Match the LiveView left, right, and two-sided icon variations.
```html
<noora-link-button href="#" label="Icon"><noora-icon slot="icon-left" name="chevron_left"></noora-icon></noora-link-button>
<noora-link-button href="#" label="Icon"><noora-icon slot="icon-right" name="chevron_right"></noora-icon></noora-link-button>
<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>
```