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/neutralbutton.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# NeutralButton
Provides a low-emphasis compact control.
```html
<noora-neutral-button aria-label="Previous page"><noora-icon name="chevron_left"></noora-icon></noora-neutral-button>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `size` | `small`, `medium`, `large` | `"large"` | Controls the dimensions. |
| `href` | `string` | None | Renders a native link to this location. |
| `disabled` | `boolean` | `false` | Disables activation. |
| `aria-label` | `string` | None | Provides an accessible name. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | The complete control content. |
## Styling parts
| Part | Description |
| --- | --- |
| `control` | The native link or button. |
## Sizes
Use small, medium, or large compact controls.
```html
<noora-neutral-button size="small" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="large" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
```
## States
Compare enabled and disabled controls.
```html
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next" disabled><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
```
## Different icons
Use the icon that matches the navigation direction.
```html
<noora-neutral-button size="medium" aria-label="Previous"><noora-icon name="chevron_left"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
```