ComboButton

A ComboButton has a button on the left and a dropdown containing a menu of more options on the right.

Import Syntax

xxxxxxxxxx
 
import ComboButton from 'calcite-react/ComboButton';

Basic Usage

 
<ComboButton
  onClick={() => console.log('primary clicked')}
  label="Export All"
>
  <Menu>
    <MenuItem onClick={() => console.log('pdf clicked')}>Export PDF</MenuItem>
    <MenuItem onClick={() => console.log('csv clicked')}>Export CSV</MenuItem>
    <MenuItem onClick={() => console.log('excel clicked')}>
      Export Excel
    </MenuItem>
  </Menu>
</ComboButton>

Colors

clear

clearGray

red

green

 
<GuideExample label="clear">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    clear
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="clearGray">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    clearGray
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="red">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    red
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="green">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    green
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>

Sizes

extraSmall

small

large

extraLarge

fullWidth

half

 
<GuideExample label="extraSmall">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    extraSmall
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="small">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    small
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="large">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    large
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="extraLarge">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    extraLarge
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="fullWidth">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    fullWidth
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>
<GuideExample label="half">
  <ComboButton
    onClick={() => console.log('primary clicked')}
    label="Export All"
    half
  >
    <Menu>
      <MenuItem onClick={() => console.log('pdf clicked')}>
        Export PDF
      </MenuItem>
      <MenuItem onClick={() => console.log('csv clicked')}>
        Export CSV
      </MenuItem>
      <MenuItem onClick={() => console.log('excel clicked')}>
        Export Excel
      </MenuItem>
    </Menu>
  </ComboButton>
</GuideExample>

 
<ComboButton
  onClick={() => console.log('primary clicked')}
  label="Export All"
  dropdownIcon={<ChevronDownIcon filled size={14} />}
>
  <Menu>
    <MenuItem onClick={() => console.log('pdf clicked')}>Export PDF</MenuItem>
    <MenuItem onClick={() => console.log('csv clicked')}>Export CSV</MenuItem>
    <MenuItem onClick={() => console.log('excel clicked')}>
      Export Excel
    </MenuItem>
  </Menu>
</ComboButton>

Props

Property	Type	Required	Default	Description
type	Enum	false	button	The HTML type property of the primary ComboButton.
iconPosition	Enum	false	after	The position of the icon in relation to other children in a ComboButton.
closeOnSelect	Bool	false	true	Whether or not the Popover should trigger onRequestClose when an element is selected.
dropdownIcon	Node	false	<CaretDownIcon filled size={14} />	The icon used inside the dropdown button
children	Node	false	-	The content of the component; should be a Menu with MenuItems for the dropdown.
clear	Bool	false	-	Style prop used to render a clear ComboButton.
clearGray	Bool	false	-	Style prop used to render a clear-gray ComboButton.
extraSmall	Bool	false	-	Style prop used to render an extra small ComboButton.
small	Bool	false	-	Style prop used to render a small ComboButton.
large	Bool	false	-	Style prop used to render a large ComboButton.
extraLarge	Bool	false	-	Style prop used to render an extra large ComboButton.
fullWidth	Bool	false	-	Style prop used to render a 100% width ComboButton.
half	Bool	false	-	Style prop used to render a 50% width ComboButton.
red	Bool	false	-	Style prop used to render a red ComboButton.
green	Bool	false	-	Style prop used to render a green ComboButton.
disabled	Bool	false	-	The HTML disabled property of the primary ComboButton.
href	String	false	-	The HTML href property of the primary ComboButton; results in rendering an anchor element.
icon	Node	false	-	The icon that will be displayed as the content of a ComboButton.

Calcite React

ComboButton

Import Syntax

Basic Usage

Colors

Sizes

Custom Dropdown icon

Props