@itwin/itwinui-react/esm/core/ButtonGroup/ButtonGroup.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
/** This context is used for letting descendant IconButtons know the ButtonGroup's orientation. */
export declare const ButtonGroupContext: React.Context<string | undefined>;
type ButtonGroupProps = {
    /**
     * Buttons in the ButtonGroup.
     */
    children: React.ReactNode;
    /**
     * If specified, this prop will be used to show a custom button when overflow happens,
     * i.e. when there is not enough space to fit all the buttons.
     *
     * Expects a function that takes the index of the first button that is overflowing (i.e. hidden)
     * and returns the `ReactNode` to render.
     *
     * The placement of this button can be controlled using the `overflowPlacement` prop.
     */
    overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
    /**
     * If `overflowButton` is specified, should it placed at the start or the end?
     * @default 'end'
     */
    overflowPlacement?: 'start' | 'end';
    /**
     * Should the buttons be placed in a horizontal or vertical layout?
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * ARIA role for the ButtonGroup.
     *
     * If set to toolbar', it will automatically support arrow-key navigation.
     *
     * **Note**: `role="toolbar"` should not be used when the ButtonGroup contains
     * non-button elements (such as inputs).
     */
    role?: 'toolbar' | AnyString;
};
/**
 * Group buttons together for common actions.
 * Handles responsive overflow when the `overflowButton` prop is specified.
 *
 * @example
 * <ButtonGroup role="toolbar">
 *   <IconButton>
 *     <SvgAdd />
 *   </IconButton>
 *   <IconButton>
 *     <SvgEdit />
 *   </IconButton>
 * </ButtonGroup>
 *
 * @example
 * const buttons = [...Array(10)].map((_, index) => <IconButton><SvgPlaceholder /></IconButton>);
 * <ButtonGroup
 *   overflowButton={(overflowStart) => <DropdownMenu menuItems={(close) =>
 *     [...Array(buttons.length - overflowStart + 1)].map((_, index) => (
 *       <MenuItem icon={<SvgPlaceholder />} onClick={close}>Button #{overflowStart + index}</MenuItem>
 *     ))
 *   }>
 *     <IconButton><SvgMore /></IconButton>
 *   </DropdownMenu>}
 * >
 *   {buttons}
 * </ButtonGroup>
 */
export declare const ButtonGroup: PolymorphicForwardRefComponent<"div", ButtonGroupProps>;
export {};