Split button

Exports

Import these components from @mbsw/ui.

SplitButton

SplitButtonAction

SplitButtonMenuTrigger

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

SplitButton

SplitButton props
Prop	Type	Requirement
`children`	`readonly [ReactElement<SplitButtonActionProps, string \| JSXElementConstructor<any>>, ReactElement<DropdownMenuProps, string \| JSXElementConstructor<any>>]`	Required
`disabled`	`boolean`	Optional

SplitButtonAction

SplitButtonAction props
Prop	Type	Requirement
`children`	`NonEmptyActionChild`	Required
`leadingIcon`	`IconComponent`	Optional
`trailingIcon`	`IconComponent`	Optional

SplitButtonMenuTrigger

SplitButtonMenuTrigger props
Prop	Type	Requirement
`aria-label`	`string`	Required
`icon`	`IconComponent`	Required

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type ReactElement, type ReactNode, type SVGProps, type ComponentPropsWithoutRef, type ComponentRef, type RefAttributes } from 'react';

import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';

export type DropdownMenuProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;

export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type IconComponent = ElementType<SVGProps<SVGSVGElement>>;

type NonEmptyActionChild = Exclude<ReactNode, boolean | null | undefined>;

export type SplitButtonProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & DataAttributes & {
    children: readonly [
        ReactElement<SplitButtonActionProps>,
        ReactElement<Parameters<typeof DropdownMenu>[0]>
    ];
    disabled?: boolean;
};

export type SplitButtonActionProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & DataAttributes & {
    children: NonEmptyActionChild;
    leadingIcon?: IconComponent;
    trailingIcon?: IconComponent;
};

export type SplitButtonMenuTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children'> & DataAttributes & {
    'aria-label': string;
    icon: IconComponent;
};

export declare const SplitButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & DataAttributes & {
    children: readonly [ReactElement<SplitButtonActionProps>, ReactElement<Parameters<typeof DropdownMenu>[0]>];
    disabled?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;

export declare const SplitButtonAction: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & DataAttributes & {
    children: NonEmptyActionChild;
    leadingIcon?: IconComponent;
    trailingIcon?: IconComponent;
} & import("react").RefAttributes<HTMLButtonElement>>;

export declare const SplitButtonMenuTrigger: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children"> & DataAttributes & {
    'aria-label': string;
    icon: IconComponent;
} & import("react").RefAttributes<HTMLButtonElement>>;