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>