1
<Canvas ctx={ctx}>
2
  <Dropdown
3
    renderTrigger={({ open, onClick }) => (
4
      <Button
5
        onClick={onClick}
6
        rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
7
      >
8
        Options
9
      </Button>
10
    )}
11
  >
12
    <DropdownMenu>
13
      <DropdownOption onClick={() => {}}>Edit</DropdownOption>
14
      <DropdownOption disabled onClick={() => {}}>
15
        Duplicate
16
      </DropdownOption>
17
      <DropdownSeparator />
18
      <DropdownOption red onClick={() => {}}>
19
        Delete
20
      </DropdownOption>
21
    </DropdownMenu>
22
  </Dropdown>
23
</Canvas>

1
<Canvas ctx={ctx}>
2
  <Dropdown
3
    renderTrigger={({ open, onClick }) => (
4
      <Button
5
        onClick={onClick}
6
        rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
7
      >
8
        Fields
9
      </Button>
10
    )}
11
  >
12
    <DropdownMenu>
13
      <DropdownOption>
14
        First option
15
        <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
16
        <DropdownOptionAction
17
          red
18
          icon={<TrashIcon />}
19
          onClick={() => {}}
20
        />
21
      </DropdownOption>
22
      <DropdownOption>
23
        Second option
24
        <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
25
        <DropdownOptionAction
26
          red
27
          icon={<TrashIcon />}
28
          onClick={() => {}}
29
        />
30
      </DropdownOption>
31
    </DropdownMenu>
32
  </Dropdown>
33
</Canvas>

1
<Canvas ctx={ctx}>
2
  <Dropdown
3
    renderTrigger={({ open, onClick }) => (
4
      <Button
5
        onClick={onClick}
6
        rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
7
      >
8
        Fields
9
      </Button>
10
    )}
11
  >
12
    <DropdownMenu>
13
      <DropdownGroup name="Group 1">
14
        <DropdownOption>Foo</DropdownOption>
15
        <DropdownOption>Bar</DropdownOption>
16
        <DropdownOption>Qux</DropdownOption>
17
      </DropdownGroup>
18
      <DropdownGroup name="Group 2">
19
        <DropdownOption>Foo</DropdownOption>
20
        <DropdownOption>Bar</DropdownOption>
21
        <DropdownOption>Qux</DropdownOption>
22
      </DropdownGroup>
23
      <DropdownGroup name="Group 3">
24
        <DropdownOption>Foo</DropdownOption>
25
        <DropdownOption>Bar</DropdownOption>
26
        <DropdownOption>Qux</DropdownOption>
27
      </DropdownGroup>
28
    </DropdownMenu>
29
  </Dropdown>
30
</Canvas>