DualActionButton

DualActionButtons allow users to take actions, and make choices, with a single tap or menu

<DualActionButton
  label="Dual Action Button"
  onClick={() => console.log('Main Action clicked')}
>
  <MenuItem onClick={() => console.log('Sub Action clicked')}>Test</MenuItem>
</DualActionButton>

Props

Prop	Type	Default	Description
children	node		The content of the button.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'default' \| 'inherit' \| 'primary' \| 'secondary'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	elementType	'button'	The component used for the root node. Either a string to use a HTML element or a component.
disabled	bool	false	If true, the button will be disabled.
disableElevation	bool	false	If true, no elevation is used.
disableFocusRipple	bool	false	If true, the keyboard focus ripple will be disabled.
disableRipple	bool		If true, the ripple effect will be disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.
endIcon	node		Element placed after the children.
fullWidth	bool	false	If true, the button will take up the full width of its container.
href	string		The URL to link to when the button is clicked. If defined, an a element will be used as the root node.
size	'large' \| 'medium' \| 'small'	'medium'	The size of the button. small is equivalent to the dense button styling.
startIcon	node		Element placed before the children.
variant	'contained' \| 'outlined' \| 'text'	'text'	The variant to use.
adminColor	bool	false	If true, semantic blue color is considered as primary color
menuProps	object		Props applied to the Menu dropdown

Examples

Simple

<DualActionButton
  label="Primary"
  onClick={() => console.log('Main Action clicked')}
>
  <MenuItem onClick={() => console.log('Sub Action 1 clicked')}>Action 1</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 2 clicked')}>Action 2</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 3 clicked')}>Action 3</MenuItem>
</DualActionButton>
<br />
<br />
<DualActionButton
  color="secondary"
  label="Secondary"
  onClick={() => console.log('Main Action clicked')}
>
  <MenuItem onClick={() => console.log('Sub Action 1 clicked')}>Action 1</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 2 clicked')}>Action 2</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 3 clicked')}>Action 3</MenuItem>
</DualActionButton>
<br />
<br />
<DualActionButton
  label="Dual Action Button"
  onClick={() => console.log('Main Action clicked')}
  menuProps={{
    maxHeight: '280px'
  }}
>
  <MenuItem onClick={() => console.log('Sub Action 1 clicked')}>Action 1</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 2 clicked')}>Action 2</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 3 clicked')}>Action 3</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 1 clicked')}>Action 1</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 2 clicked')}>Action 2</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 3 clicked')}>Action 3</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 1 clicked')}>Action 1</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 2 clicked')}>Action 2</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 3 clicked')}>Action 3</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 1 clicked')}>Action 1</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 2 clicked')}>Action 2</MenuItem>
  <MenuItem onClick={() => console.log('Sub Action 3 clicked')}>Action 3</MenuItem>
</DualActionButton>