Dialog

Exports

Import these components from @mbsw/ui.

AlertDialog
AlertDialogAction
AlertDialogActions
AlertDialogCancel
AlertDialogContent
AlertDialogDescription
AlertDialogHeader
AlertDialogPortal
AlertDialogTitle
AlertDialogTitleGroup
AlertDialogTrigger
Dialog
DialogActions
DialogBody
DialogClose
DialogContent
DialogDescription
DialogHeader
DialogOverlay
DialogPortal
DialogTitle
DialogTitleGroup
DialogTrigger
SplitDialog
SplitDialogActions
SplitDialogClose
SplitDialogContent
SplitDialogLayout
SplitDialogTrigger

Props

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

AlertDialogAction

AlertDialogAction props
PropTypeRequirement
size'lg' | 'md' | 'sm'Optional

AlertDialogCancel

AlertDialogCancel props
PropTypeRequirement
size'lg' | 'md' | 'sm'Optional

AlertDialogContent

AlertDialogContent props
PropTypeRequirement
size'lg' | 'md' | 'sm'Optional

DialogActions

DialogActions props
PropTypeRequirement
childrenDialogAction | DialogAction[] | nullOptional

DialogContent

DialogContent props
PropTypeRequirement
closeLabelstringOptional
hasClosebooleanOptional
size'lg' | 'md' | 'sm'Optional

SplitDialogActions

SplitDialogActions props
PropTypeRequirement
childrenDialogAction | DialogAction[] | nullOptional

SplitDialogLayout

SplitDialogLayout props
PropTypeRequirement
leftReactNodeRequired
rightReactNodeRequired

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

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

import { AlertDialog as AlertDialogPrimitive, Dialog as DialogPrimitive } from 'radix-ui';

export type ButtonVariant = 'solid' | 'outline' | 'ghost';

export type ButtonTone = 'primary' | 'secondary' | 'destructive' | 'highlight';

export type ButtonSize = 'lg' | 'md' | 'sm';

export type IconOnlyButtonSize = ButtonSize | 'xs';

type IconComponent = ElementType<SVGProps<SVGSVGElement>>;

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

type ButtonBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'size'> & DataAttributes & {
    /** Highlight-only visual state. Callers retain aria-busy, disabled and event policy. */
    generating?: boolean;
    tone?: ButtonTone;
    variant?: ButtonVariant;
};

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

type NativeTextButtonProps = ButtonBaseProps & {
    asChild?: false;
    children: NonEmptyButtonChild;
    icon?: never;
    iconForeground?: never;
    iconOnly?: false;
    leadingIcon?: IconComponent;
    size?: ButtonSize;
    trailingIcon?: IconComponent;
};

type SlottedTextButtonProps = Omit<ButtonBaseProps, 'disabled'> & {
    asChild: true;
    children: ReactElement;
    disabled?: never;
    icon?: never;
    iconForeground?: never;
    iconOnly?: false;
    leadingIcon?: never;
    size?: ButtonSize;
    trailingIcon?: never;
};

type IconOnlyButtonContent = {
    children?: never;
    icon: IconComponent;
    /** Secondary direct icon slot only; children styling stays caller-owned. */
    iconForeground?: 'primary' | 'secondary';
} | {
    children: NonEmptyButtonChild;
    icon?: never;
    iconForeground?: never;
};

type IconOnlyButtonProps = ButtonBaseProps & IconOnlyButtonContent & {
    'aria-label': string;
    asChild?: false;
    iconOnly: true;
    leadingIcon?: never;
    size?: IconOnlyButtonSize;
    trailingIcon?: never;
};

export type ButtonProps = (NativeTextButtonProps & RefAttributes<HTMLButtonElement>) | (SlottedTextButtonProps & RefAttributes<HTMLElement>) | (IconOnlyButtonProps & RefAttributes<HTMLButtonElement>);

type ButtonComponent = {
    (props: ButtonProps): ReactElement | null;
    displayName?: string;
};

export declare const Button: ButtonComponent;

export type DialogSize = 'lg' | 'md' | 'sm';

type DialogOverlayPrimitiveProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;

export type DialogOverlayProps = DialogOverlayPrimitiveProps & RefAttributes<ComponentRef<typeof DialogPrimitive.Overlay>>;

type DialogContentPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'asChild'>;

export type DialogContentProps = DialogContentPrimitiveProps & RefAttributes<ComponentRef<typeof DialogPrimitive.Content>> & {
    closeLabel?: string;
    hasClose?: boolean;
    size?: DialogSize;
};

type AlertDialogContentPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, 'asChild'>;

export type AlertDialogContentProps = AlertDialogContentPrimitiveProps & RefAttributes<ComponentRef<typeof AlertDialogPrimitive.Content>> & {
    size?: DialogSize;
};

type AlertDialogButtonProps = Omit<ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, 'size'> & {
    size?: ButtonSize;
};

export type AlertDialogActionProps = AlertDialogButtonProps & RefAttributes<ComponentRef<typeof AlertDialogPrimitive.Action>>;

export type AlertDialogCancelProps = AlertDialogButtonProps & RefAttributes<ComponentRef<typeof AlertDialogPrimitive.Cancel>>;

type SplitDialogContentPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'asChild'>;

export type SplitDialogContentProps = SplitDialogContentPrimitiveProps & RefAttributes<ComponentRef<typeof DialogPrimitive.Content>>;

export type SplitDialogLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    left: ReactNode;
    right: ReactNode;
};

type DialogAction = ReactElement<ButtonProps, typeof Button>;

type DialogActionsProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    children?: DialogAction | DialogAction[] | null;
};

export declare function Dialog(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react").JSX.Element;

export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & RefAttributes<HTMLButtonElement>>;

export declare const DialogPortal: import("react").FC<DialogPrimitive.DialogPortalProps>;

export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & RefAttributes<HTMLButtonElement>>;

export declare function DialogOverlay({ asChild, children, className, forceMount, ref, style, ...overlayProps }: DialogOverlayProps): import("react").JSX.Element | null;

export declare function DialogContent(props: DialogContentProps): import("react").JSX.Element;

export declare const DialogHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;

export declare const DialogTitleGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;

export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>, "ref"> & RefAttributes<HTMLHeadingElement>>;

export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & RefAttributes<HTMLParagraphElement>, "ref"> & RefAttributes<HTMLParagraphElement>>;

export declare const DialogBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;

export declare function DialogActions({ children, className, ...actionsProps }: DialogActionsProps): import("react").JSX.Element | null;

export declare function AlertDialog(props: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>): import("react").JSX.Element;

export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & RefAttributes<HTMLButtonElement>>;

export declare const AlertDialogPortal: import("react").FC<AlertDialogPrimitive.AlertDialogPortalProps>;

export declare function AlertDialogContent(props: AlertDialogContentProps): import("react").JSX.Element;

export declare const AlertDialogHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;

export declare const AlertDialogTitleGroup: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;

export declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & RefAttributes<HTMLHeadingElement>, "ref"> & RefAttributes<HTMLHeadingElement>>;

export declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & RefAttributes<HTMLParagraphElement>, "ref"> & RefAttributes<HTMLParagraphElement>>;

export declare function AlertDialogActions({ children, className, ...actionsProps }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

export declare function AlertDialogCancel({ className, ref, size, ...cancelProps }: AlertDialogCancelProps): import("react").JSX.Element;

export declare function AlertDialogAction({ className, ref, size, ...actionProps }: AlertDialogActionProps): import("react").JSX.Element;

export declare function SplitDialog(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react").JSX.Element;

export declare const SplitDialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & RefAttributes<HTMLButtonElement>>;

export declare const SplitDialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & RefAttributes<HTMLButtonElement>>;

export declare function SplitDialogContent(props: SplitDialogContentProps): import("react").JSX.Element;

export declare function SplitDialogLayout({ className, left, right, ...layoutProps }: SplitDialogLayoutProps): import("react").JSX.Element;

export declare const SplitDialogActions: typeof DialogActions;