@itwin/itwinui-react/cjs/core/Buttons/SplitButton.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { ButtonProps } from './Button.js';
import { IconButton } from './IconButton.js';
import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
import type { Placement } from '@floating-ui/react';
import type { usePopover } from '../Popover/Popover.js';
export type SplitButtonProps = ButtonProps & {
    /**
     * Items in the dropdown menu.
     * Pass a function that takes the `close` argument (to close the menu),
     * and returns a list of `MenuItem` components.
     */
    menuItems: (close: () => void) => React.JSX.Element[];
    /**
     * Placement of the dropdown menu.
     * @default 'bottom-end'
     */
    menuPlacement?: Placement;
    /**
     * Content of primary button.
     */
    children: React.ReactNode;
    /**
     * Passes props to SplitButton wrapper.
     */
    wrapperProps?: React.ComponentProps<'div'>;
    /**
     * Passes props to SplitButton menu button.
     */
    menuButtonProps?: Omit<React.ComponentProps<typeof IconButton>, 'label' | 'size'>;
    /**
     * Props to customize menu behavior.
     */
    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'> & React.ComponentProps<'div'>;
} & Pick<PortalProps, 'portal'>;
/**
 * Split button component with a DropdownMenu.
 *
 * The delegated props and forwarded ref are passed onto the primary button.
 * It also supports using the `as` prop to change which element is rendered.
 *
 * @example
 * const menuItems = (close: () => void) => [
 *   <MenuItem key={1} onClick={onClick(1, close)}>Item #1</MenuItem>,
 *   <MenuItem key={2} onClick={onClick(2, close)}>Item #2</MenuItem>,
 * ];
 * <SplitButton onClick={onClick} menuItems={menuItems}>Default</SplitButton>
 * <SplitButton onClick={onClick} menuItems={menuItems} styleType='high-visibility'>High visibility</SplitButton>
 */
export declare const SplitButton: PolymorphicForwardRefComponent<"button", SplitButtonProps>;