Button Dropdown

Combines a primary button action with an attached menu.

ButtonDropdown web component

Combines a primary button action with an attached menu.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Default

Attach related options to a primary action.

Option 1

Option 2

Option 3

<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.

Option 1

Option 2

Option 1

Option 2

<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.

Option 1

Option 2

<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.

Option 1

Option 2

<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>

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`	json	`[]`	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

Name	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

Name	Description
`main-button`	The main action.
`trigger`	The menu trigger.
`content`	The menu content.

Behavior

Selections emit a `noora-select` event.