Split Button

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/split-button

Yarn

yarn add @leafygreen-ui/split-button

NPM

npm install @leafygreen-ui/split-button

Example

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

<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 | |