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/buttondropdown.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# ButtonDropdown
Combines a primary button action with an attached menu.
```html
<noora-button-dropdown label="Create">
<noora-dropdown-item value="project">Project</noora-dropdown-item>
</noora-button-dropdown>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `""` | Sets the main action label. |
| `size` | `medium`, `large` | `"large"` | Controls the dimensions. |
| `disabled` | `boolean` | `false` | Disables both controls. |
| `open` | `boolean` | `false` | Controls whether the menu is open. |
| `close-on-select` | `boolean` | `true` | Closes the menu after a selection. |
| `keep-open` | `boolean` | `false` | Keeps the menu open after selection. |
| `align` | `start`, `end` | `"start"` | Aligns the menu to the button. |
## Properties
| Property | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array<Record<string, unknown>>` | `[]` | Defines menu items programmatically when declarative noora-dropdown-item children are not used. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-action` | `CustomEvent<Record<string, never>>` | Emitted when the primary button is activated. |
| `noora-open-change` | `CustomEvent<{ open: boolean }>` | Emitted when the menu opens or closes. |
| `noora-select` | `CustomEvent<{ item: Record<string, unknown>; value: unknown }>` | Emitted when a menu item is selected. |
## Slots
| Slot | Description |
| --- | --- |
| `icon-left` | An icon before the main label. |
| `icon-right` | An icon after the main label. |
| `default` | Declarative noora-dropdown-item children. |
## Styling parts
| Part | Description |
| --- | --- |
| `main-button` | The main action. |
| `trigger` | The menu trigger. |
| `content` | The menu content. |
Selections emit a `noora-select` event.
## Default
Attach related options to a primary action.
```html
<noora-button-dropdown label="Button">
<noora-dropdown-item value="1">Option 1</noora-dropdown-item>
<noora-dropdown-item value="2">Option 2</noora-dropdown-item>
<noora-dropdown-item value="3">Option 3</noora-dropdown-item>
</noora-button-dropdown>
```
## Sizes
Button dropdowns are available in medium and large sizes.
```html
<noora-button-dropdown label="Button" size="medium">
<noora-dropdown-item value="1">Option 1</noora-dropdown-item>
<noora-dropdown-item value="2">Option 2</noora-dropdown-item>
</noora-button-dropdown>
<noora-button-dropdown label="Button" size="large">
<noora-dropdown-item value="1">Option 1</noora-dropdown-item>
<noora-dropdown-item value="2">Option 2</noora-dropdown-item>
</noora-button-dropdown>
```
## Icons
Place icons on either side of the main action label.
```html
<noora-button-dropdown label="Button">
<noora-icon slot="icon-left" name="chevron_left"></noora-icon>
<noora-icon slot="icon-right" name="chevron_right"></noora-icon>
<noora-dropdown-item value="1">Option 1</noora-dropdown-item>
<noora-dropdown-item value="2">Option 2</noora-dropdown-item>
</noora-button-dropdown>
```
## Disabled
The disabled state prevents both action and menu interaction.
```html
<noora-button-dropdown disabled label="Button">
<noora-dropdown-item value="1">Option 1</noora-dropdown-item>
<noora-dropdown-item value="2">Option 2</noora-dropdown-item>
</noora-button-dropdown>
```