@leafygreen-ui/split-button NPM

Split Button

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/split-button

NPM

npm install @leafygreen-ui/split-button

Example

import { SplitButton } from `@leafygreen-ui/split-button`;
import { MenuItem } from '@leafygreen-ui/menu';

<SplitButton
  label="label"
  menuItems={
    [
      <MenuItem key='0'>Menu Item</MenuItem>,
      <MenuItem key='1' disabled>Disabled Menu Item</MenuItem>,
      <MenuItem key='2' description="I am also a description">
        Menu Item With Description
      </MenuItem>
    ]
  }
/>

Properties

Prop	Type	Description	Default
`label`	`string`	The text that will appear inside of the primary button.
`darkMode`	`boolean`	Renders the component with dark mode styles.	`false`
`variant`	`'default'` \| `'primary'` \| `'danger'`	Sets the variant for both Buttons.	`'default'`
`size`	`'xsmall'` \| `'small'` \| `'default'` \| `'large'`	Sets the size for both buttons.	`'default'`
`align`	`'top'` \| `'bottom'`	Determines the alignment of the menu relative to the component wrapper.	`'bottom'`
`justify`	`'start'` \| `'end'`	Determines the justification of the menu relative to the component wrapper.	`'end'`
`menuItems`	`Array<MenuItem>`	The menu items to appear in the menu dropdown. Must be an array of `<MenuItem />`.
`onTriggerClick`	`React.MouseEventHandler`	Callback fired when the trigger is clicked.
`triggerAriaLabel`	`string`	aria-label for the menu trigger button.
`onChange`	`React.MouseEventHandler`	Callback fired when a menuItem is clicked.
`renderMode`	`'inline'` \| `'portal'` \| `'top-layer'`	Options to render the popover element * deprecated `'inline'` will render the popover element inline in the DOM where it's written * deprecated `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` * `'top-layer'` will render the popover element in the top layer	`'top-layer'`
`portalContainer`	`HTMLElement` \| `null`	Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`.
`scrollContainer`	`HTMLElement` \| `null`	If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.
`portalClassName`	`string`	Passes the given className to the popover's portal container if the default portal container is being used.
`popoverZIndex`	`number`	Sets the z-index CSS property for the popover.
...	`native attributes of component passed to as prop`	Any other properties will be spread on the root element