<!-- source-hash: 755936e5a23162889a0f4b377887a066 -->
A styled dropdown trigger button that combines a labeled action area with a rotating chevron indicator, opening a `MoreActionsMenu` on click.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DropdownButton` | Component | Main trigger button that wraps `MoreActionsMenu` |
| `DropdownButtonProps` | Interface | Props definition for the component |

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | — | Button label text |
| `icon` | `ReactNode` | — | Optional leading icon |
| `items` | `MoreActionsItem[]` | — | Dropdown menu items |
| `align` | `'start' \| 'center' \| 'end'` | `'end'` | Menu alignment |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | Menu opening side |
| `disabled` | `boolean` | — | Disables interaction |

## Key Behaviors

- **Single click target** — label and chevron areas are visually separated by a border seam but share one `<button>` element
- **Open state styles** — background lightens (`ods-bg-hover`) when the menu is open or hovered
- **Chevron rotation** — animates 180° when the dropdown is open
- **Disabled guard** — blocks `onOpenChange` and prevents pointer events when `disabled` is set

## Usage Example

```typescript
import { DropdownButton } from './dropdown-button'
import { SettingsIcon } from '../icons-v2-generated'

<DropdownButton
  label="Actions"
  icon={<SettingsIcon />}
  align="end"
  side="bottom"
  items={[
    { label: 'Edit', onClick: () => console.log('edit') },
    { label: 'Delete', onClick: () => console.log('delete'), destructive: true },
  ]}
/>
```