Button Dropdown

Props

NameTypeDescription
children
string
selectItems
arrayOf
open
bool
onClick
func
onRequestClose
func
checkboxProps
shape
disabled
bool

Button Dropdown

A button like component with an integrated dropdown
<ButtonGroup> <ButtonDropdown checkboxProps={{ onClick: function noRefCheck() {} }} selectItems={[ { onClick: function noRefCheck() {}, title: 'Pending' }, { component: 'a', componentProps: { href: 'http://google.com', target: '_blank' }, minWidth: 225, title: 'This is a link' } ]} size="large" subdued={true} variant="tertiary" /> <ButtonDropdown selectItems={[ { onClick: function noRefCheck() {}, title: 'Pending' }, { onClick: function noRefCheck() {}, title: 'Approved' } ]} size="large" variant="tertiary" > Another One </ButtonDropdown> <ButtonDropdown selectItems={[ { onClick: function noRefCheck() {}, title: 'Pending' }, { onClick: function noRefCheck() {}, title: 'Approved' } ]} size="large" variant="tertiary" > 1 </ButtonDropdown> <Button variant="tertiary"> Hello World </Button> </ButtonGroup>

with a disabled button

Buttons can be in disabled states. This state will also be applied to the nested checkbox
<ButtonGroup> <ButtonDropdown checkboxProps={{ onClick: function noRefCheck() {} }} disabled={true} size="large" variant="tertiary" /> <ButtonDropdown selectItems={[ { onClick: function noRefCheck() {}, title: 'Pending' }, { disabled: true, onClick: function noRefCheck() {}, title: 'Approved' } ]} size="large" variant="tertiary" > Another One </ButtonDropdown> <ButtonDropdown selectItems={[ { onClick: function noRefCheck() {}, title: 'Pending' }, { onClick: function noRefCheck() {}, title: 'Approved' } ]} size="large" variant="tertiary" > 1 </ButtonDropdown> </ButtonGroup>