Detalhes do pacote

@leafygreen-ui/split-button

mongodb58.8kApache-2.06.1.1

leafyGreen UI Kit Split Button

readme (leia-me)

Split Button

npm (scoped)

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