Packages
noora
0.85.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/button.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Button
Triggers an action, submits a form, or navigates to another location.
```html
<noora-button type="button">Create project</noora-button>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | None | Identifies the element that describes the button. |
| `aria-label` | `string` | None | Provides an accessible name when visible text is unavailable. |
| `aria-labelledby` | `string` | None | Identifies the element that labels the button. |
| `title` | `string` | None | Provides advisory information for the button. |
| `autofocus` | `boolean` | `false` | Focuses the button when the page loads. |
| `disabled` | `boolean` | `false` | Prevents activation and form submission. |
| `download` | `string` | None | Downloads the linked resource, optionally using this value as the filename. |
| `form` | `string` | None | Associates the button with a form by element identifier. |
| `formaction` | `string` | None | Overrides the associated form action for this submit button. |
| `formenctype` | `string` | None | Overrides the associated form encoding type for this submit button. |
| `formmethod` | `string` | None | Overrides the associated form method for this submit button. |
| `formnovalidate` | `boolean` | `false` | Skips validation when this button submits its associated form. |
| `formtarget` | `string` | None | Overrides where the associated form response is displayed. |
| `href` | `string` | `""` | Renders the control as a link to this location. |
| `icon-only` | `boolean` | `false` | Uses the default slot as the entire button content. An accessible label is required. |
| `label` | `string` | `""` | Provides fallback text when the default slot is empty. |
| `name` | `string` | `""` | Sets the form field name submitted with the button value. |
| `rel` | `string` | None | Sets the relationship between the current page and a linked resource. |
| `size` | `small`, `medium`, `large` | `"large"` | Controls the button dimensions and text size. |
| `target` | `string` | None | Controls where a linked resource is opened. |
| `type` | `button`, `reset`, `submit` | `"submit"` | Controls native button behavior when href is absent. |
| `value` | `string` | `""` | Sets the form value submitted with the button name. |
| `variant` | `primary`, `secondary`, `destructive` | `"primary"` | Controls the visual emphasis and semantic intent. |
## Read-only properties
| Property | Type | Description |
| --- | --- | --- |
| `control` | `HTMLAnchorElement \| HTMLButtonElement \| null` | The native link or button rendered inside the component. |
| `form` | `HTMLFormElement \| null` | The form associated with the button, if one exists. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | The visible label, or the complete content when icon-only is present. |
| `icon-left` | An icon displayed before the label. |
| `icon-right` | An icon displayed after the label. |
## Styling parts
| Part | Description |
| --- | --- |
| `control` | The native link or button control. |
Use the standard `::part()` selector when an application needs a targeted override:
```css
noora-button::part(control) {
inline-size: 100%;
}
```
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.
## Variants
Choose a semantic variant through the variant attribute.
```html
<noora-button type="button" variant="primary">Primary</noora-button>
<noora-button type="button" variant="secondary">Secondary</noora-button>
<noora-button type="button" variant="destructive">Destructive</noora-button>
```
## Sizes
The default size is large.
```html
<noora-button type="button" size="small">Small</noora-button>
<noora-button type="button" size="medium">Medium</noora-button>
<noora-button type="button" size="large">Large</noora-button>
```
## Icons and states
Named slots place icons around the label. Icon-only buttons require an accessible label.
```html
<noora-button type="button">
<svg
slot="icon-left"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path d="m15 18-6-6 6-6" stroke-width="2"></path>
</svg>
Previous
</noora-button>
<noora-button type="button" variant="secondary">
Continue
<svg
slot="icon-right"
aria-hidden="true"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path d="m9 18 6-6-6-6" stroke-width="2"></path>
</svg>
</noora-button>
<noora-button type="button" icon-only aria-label="Go back">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="m15 18-6-6 6-6" stroke-width="2"></path>
</svg>
</noora-button>
<noora-button type="button" variant="secondary" disabled>
Disabled
</noora-button>
```