For use with DropdownMenu or Dropdown components

Usage

Import

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

Example

() => {
    

    return (
        <DropdownMenu 
            contentStyles={{w: 400}}
            title="Select one"
            items={selectUsers} 
        >
            <DropdownButton label={'Label'}/>
        </DropdownMenu>
    )
}
() => {
    

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

Arrow

Toggle the arrow using showArrow prop

() => {
    

    return (
        <DropdownMenu 
            contentStyles={{w: 400}}
            title="Select one"
            items={selectUsers} 
        >
            <DropdownButton showArrow={false} label={'No Arrow'}/>
        </DropdownMenu>
    )
}
() => {
    

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

Suffix

Add an optional suffix using suffix prop

() => {
    

    return (
        <DropdownMenu 
            contentStyles={{w: 400}}
            title="Select one"
            items={selectUsers} 
        >
            <DropdownButton suffix='(100)' label={'Filter'}/>
        </DropdownMenu>
    )
}
() => {
    

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