For use with DropdownMenu or Dropdown components

Usage

Import

import { DropdownButtonV1 } from '@passfort/castle'
content_copy
Copy

Example

function Example() {
  return (
    <DropdownMenu
      contentStyles={{ w: 400 }}
      title="Select one"
      items={selectUsers}
    >
      <DropdownButtonV1 label={'Label'} />
    </DropdownMenu>
  )
}
function Example() {
  return (
    <DropdownMenu
      contentStyles={{ w: 400 }}
      title="Select one"
      items={selectUsers}
    >
      <DropdownButtonV1 label={'Label'} />
    </DropdownMenu>
  )
}
content_copy
Copy
live example

Arrow

Toggle the arrow using showArrow prop

function Example() {
  return (
    <DropdownMenu
      contentStyles={{ w: 400 }}
      title="Select one"
      items={selectUsers}
    >
      <DropdownButtonV1 showArrow={false} label={'No Arrow'} />
    </DropdownMenu>
  )
}
function Example() {
  return (
    <DropdownMenu
      contentStyles={{ w: 400 }}
      title="Select one"
      items={selectUsers}
    >
      <DropdownButtonV1 showArrow={false} label={'No Arrow'} />
    </DropdownMenu>
  )
}
content_copy
Copy
live example

Suffix

Add an optional suffix using suffix prop

function Example() {
  return (
    <DropdownMenu
      contentStyles={{ w: 400 }}
      title="Select one"
      items={selectUsers}
    >
      <DropdownButtonV1 suffix="(100)" label={'Filter'} />
    </DropdownMenu>
  )
}
function Example() {
  return (
    <DropdownMenu
      contentStyles={{ w: 400 }}
      title="Select one"
      items={selectUsers}
    >
      <DropdownButtonV1 suffix="(100)" label={'Filter'} />
    </DropdownMenu>
  )
}
content_copy
Copy
live example