@syncfusion/react-splitbuttons/src/split-button/split-button.d.ts

Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.

import { ButtonHTMLAttributes } from 'react';
import { Position, Color, Size, Variant } from '@syncfusion/react-buttons';
import { ButtonSelectEvent, ItemModel } from '../dropdown-button/dropdown-button';
import * as React from 'react';
/**
 * Split Button properties used to customize its behavior and appearance.
 */
export interface SplitButtonProps {
    /**
     * Specifies an icon for the button, which can be defined using a CSS class name for custom styling or an SVG element for rendering.
     *
     * @default -
     */
    icon?: React.ReactNode;
    /**
     * Specifies the position of the icon relative to the Dropdown Button text. Options include placing the icon at the left, right, top, or bottom of the button content.
     *
     * @default 'Left'
     */
    iconPosition?: Position;
    /**
     * Specifies action items with its properties which will be rendered as Split Button secondary button popup.
     *
     * @default []
     */
    items?: ItemModel[];
    /**
     * This property defines the width of the dropdown popup for the Dropdown Button component.
     * Set the width as a string or number using valid CSS units like `px`, `%`, or `rem`, or as pixels.
     * The default value of `auto` allows the popup to adjust based on the content length, but a specific width can be provided for more precise control.
     *
     * @default auto
     */
    popupWidth?: string | number;
    /**
     * Specifies the popup element creation on open.
     *
     * @default false
     */
    lazyOpen?: boolean;
    /**
     * Specifies the target element for the Dropdown Button's popup content.
     *
     * @default -
     */
    target?: React.RefObject<HTMLElement>;
    /**
     * Provides a template for displaying content within the dropdown items.
     *
     * @default -
     */
    itemTemplate?: (item: ItemModel) => React.ReactNode;
    /**
     * Specifies the color style of the Split Button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error' and 'Info'.
     *
     * @default Color.Primary
     */
    color?: Color;
    /**
     * Specifies the variant style of the Split Button. Options include 'Outlined', 'Filled' and 'Standard'.
     *
     * @default Variant.Filled
     */
    variant?: Variant;
    /**
     * Specifies the size style of the Split Button. Options include 'Small', 'Medium' and 'Large'.
     *
     * @default Size.Medium
     */
    size?: Size;
    /**
     * Event triggered while closing the Split Button popup.
     *
     * @event onClose
     */
    onClose?: (event?: React.MouseEvent) => void;
    /**
     * Event triggered while opening the Split Button popup.
     *
     * @event onOpen
     */
    onOpen?: (event?: React.MouseEvent) => void;
    /**
     * Event triggered while selecting an action item in Split Button popup.
     *
     * @event onSelect
     */
    onSelect?: (event: ButtonSelectEvent) => void;
}
/**
 * Represents the methods of the Split Button component.
 */
export interface ISplitButton extends SplitButtonProps {
    /**
     * This is Split Button component element.
     *
     * @private
     * @default null
     */
    element?: HTMLElement | null;
    /**
     * To open/close Split Button popup based on current state of the Split Button.
     *
     * @public
     * @returns {void}
     */
    toggle?(): void;
}
type ISplitButtonProps = ISplitButton & ButtonHTMLAttributes<HTMLButtonElement>;
/**
 * The Split Button component provides a combination of a default button action and a Dropdown Button, enabling users to quickly access additional options or actions in a compact interface.
 *
 * ```typescript
 * import { SplitButton } from "@syncfusion/react-splitbuttons";
 *
 * const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];
 * <SplitButton items={menuItems}>Default Action</SplitButton>
 * ```
 */
export declare const SplitButton: React.ForwardRefExoticComponent<ISplitButtonProps & React.RefAttributes<ISplitButton>>;
export default SplitButton;