Popover

Exports

Import these components from @mbsw/ui.

HoverCard
HoverCardContent
HoverCardTrigger
Popover
PopoverContent
PopoverTrigger

Props

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

HoverCardContent

HoverCardContent props
PropTypeRequirement
width'fixed' | 'hug'Optional

PopoverContent

PopoverContent props
PropTypeRequirement
actionsPopoverAction | PopoverAction[] | nullOptional
childrenReactNodeRequired
size'lg' | 'md' | 'sm'Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ComponentProps, type ReactElement, type ReactNode, type ButtonHTMLAttributes, type ElementType, type RefAttributes, type SVGProps } from 'react';

import { HoverCard as HoverCardPrimitive, Popover as PopoverPrimitive } 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 PopoverSize = 'lg' | 'md' | 'sm';

export type HoverCardWidth = 'fixed' | 'hug';

export type PopoverProps = ComponentProps<typeof PopoverPrimitive.Root>;

export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>;

type PopoverPrimitiveContentProps = ComponentProps<typeof PopoverPrimitive.Content>;

type PopoverAction = ReactElement<ButtonProps, typeof Button>;

export type PopoverContentProps = Omit<PopoverPrimitiveContentProps, 'asChild' | 'avoidCollisions' | 'children'> & {
    actions?: PopoverAction | PopoverAction[] | null;
    children: ReactNode;
    size?: PopoverSize;
};

export type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;

export type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;

type HoverCardPrimitiveContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;

export type HoverCardContentProps = Omit<HoverCardPrimitiveContentProps, 'avoidCollisions'> & {
    width?: HoverCardWidth;
};

export declare function Popover(props: PopoverProps): import("react").JSX.Element;

export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;

export declare function PopoverContent(props: PopoverContentProps): import("react").JSX.Element;

export declare function HoverCard(props: HoverCardProps): import("react").JSX.Element;

export declare function HoverCardTrigger(props: HoverCardTriggerProps): import("react").JSX.Element;

export declare function HoverCardContent({ align, alignOffset, children, className, side, sideOffset, width, ...contentProps }: HoverCardContentProps): import("react").JSX.Element;