Split Button

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/split-button
`

$3

`shell
yarn add @leafygreen-ui/split-button
`

$3

`shell
npm install @leafygreen-ui/split-button
`

Example

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

label="label"
menuItems={[
Menu Item,

Disabled Menu Item
,

Menu Item With Description
,
]}
/>;
`

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 | The menu items to appear in the menu dropdown. Must be an array of . | |
| 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 | |