# Dropdown button

```js
<SilkeBox wrap gap align="center" fill>
  <SilkeDropdownButton
    label="Create project"
    kind="primary"
    items={[
      {
        label: 'Desktop first',
        icon: 'desktop',
        groupLabel: 'Blank',
        onClick: () => {},
      },
      {
        label: 'Mobile first',
        icon: 'mobile',
        groupLabel: 'Blank',
        onClick: () => {},
      },
      {
        label: 'Devices',
        icon: 'devices',
        groupLabel: 'Blank',
        items: [
          {
            label: 'Large desktop',
            icon: 'desktop',
            onClick: () => {},
          },
          {
            label: 'Small desktop',
            icon: 'tablet',
            onClick: () => {},
          },
          {
            label: 'Really long breakpoint name here',
            icon: 'laptop',
            onClick: () => {},
          },
        ],
      },
      'divider',
      {
        label: 'Library page',
        icon: 'library',
        groupLabel: 'Start with',
        onClick: () => {},
      },
      {
        label: 'Figma design',
        icon: 'figma',
        groupLabel: 'Start with',
        onClick: () => {},
      },
      {
        label: 'Page draft',
        icon: 'ai.page',
        tag: { label: 'Beta', color: 'dark', size: 'tiny' },
        groupLabel: 'Start with',
        onClick: () => {},
      },
    ]}
    closeOnSelect
  />
</SilkeBox>
```