overlay
js/ui/components/overlay.ts
Host-neutral floating and overlay components. @internal
Types
type StatusVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
Semantic variants shared by notifications and status surfaces.
Interfaces
interface ModalProps extends StyleProps, Props {
Props accepted by {@link Modal}.
Properties
title?: string
onDismiss?: () => void
width?: number
height?: number
children?: Child
interface ContextMenuProps extends StyleProps, Props {
Props accepted by {@link ContextMenu}.
Properties
at: {
x: number;
y: number;
}
Position where the menu opens.
items: readonly MenuItem[]
selectedKey?: string | null
onSelect?: (key: string) => void
onDismiss?: () => void
interface PopoverProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Popover}.
Properties
open: boolean
anchorId: string
Stable trigger id used to anchor the surface.
onDismiss?: () => void
children?: Child
interface TooltipProps extends StyleProps, Props {
Props accepted by {@link Tooltip}.
Properties
text: string
open: boolean
anchorId: string
interface ToastProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Toast}.
Properties
message: string
variant?: StatusVariant
interface ToastEntry {
One entry in a {@link ToastStack}.
Properties
id: string
message: string
variant?: StatusVariant
interface ToastStackProps extends StyleProps, Props {
Props accepted by {@link ToastStack}.
Properties
toasts: readonly ToastEntry[]
interface HoverCardProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link HoverCard}.
Properties
open: boolean
anchorId: string
title?: string
children?: Child
interface FloatingActionBarProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link FloatingActionBar}.
Properties
anchorId: string
Id of the container the bar floats within.
placement?: 'bottom-start' | 'bottom-center' | 'bottom-end'
children?: Child
Functions
function Modal(props: ModalProps): VNode
Centered dialog above a backdrop.
function ContextMenu(props: ContextMenuProps): VNode
Positioned menu with outside-click and Escape dismissal.
function Popover(props: PopoverProps): VNode
Interactive surface anchored beneath a trigger.
function Tooltip(props: TooltipProps): VNode
One-line anchored hint.
function Toast(props: ToastProps): VNode
One notification with a semantic status variant.
function ToastStack(props: ToastStackProps): VNode
Notification column pinned to the viewport edge.
function HoverCard(props: HoverCardProps): VNode
Structured anchored content controlled by the caller.
function FloatingActionBar(props: FloatingActionBarProps): VNode
Action row floating at the bottom of an identified container.