Focus attention on a task in a modal overlay. Use it for a short form, review or confirmation; provide a clear title and a way to close and return to the trigger.
Examples Props Setup All components → Examples Confirmation
JSX usage Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
Copy install command bun add @kongmy-dev/sapphire-ui react react-dom radix-ui
Copy JSX "use client";
import { useState } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { ConfirmDialog } from "@kongmy-dev/sapphire-ui/dialog";
function DialogConfirmation() {
const [open, setOpen] = useState(false);
const [confirmed, setConfirmed] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Confirm archive</Button>
<output>{confirmed ? 'Archived' : 'Not archived'}</output>
<ConfirmDialog
open={open}
onOpenChange={setOpen}
title="Archive project?"
message="You can restore this project later."
confirmLabel="Archive"
onConfirm={() => setConfirmed(true)}
>
<p>Project: Sapphire</p>
</ConfirmDialog>
</>
);
}
export default DialogConfirmation;
HTML markup Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Controlled
JSX usage Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
Copy install command bun add @kongmy-dev/sapphire-ui react react-dom radix-ui
Copy JSX "use client";
import { useState } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@kongmy-dev/sapphire-ui/dialog";
function DialogControlled() {
const [open, setOpen] = useState(false);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>Open controlled dialog</Button>
</DialogTrigger>
<DialogContent maxWidth="520px" closeLabel="Tutup">
<DialogHeader>
<DialogTitle>Controlled dialog</DialogTitle>
</DialogHeader>
<DialogBody>
<DialogDescription>
Application state controls this dialog.
</DialogDescription>
</DialogBody>
<DialogFooter>
<Button onClick={() => setOpen(false)}>Done</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export default DialogControlled;
HTML markup Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Destructive
JSX usage Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
Copy install command bun add @kongmy-dev/sapphire-ui react react-dom radix-ui
Copy JSX "use client";
import { useState } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { ConfirmDialog } from "@kongmy-dev/sapphire-ui/dialog";
function DialogDestructive() {
const [open, setOpen] = useState(false);
const [status, setStatus] = useState('No action');
return (
<>
<Button variant="destructive" onClick={() => setOpen(true)}>
Confirm deletion
</Button>
<output>{status}</output>
<ConfirmDialog
open={open}
onOpenChange={setOpen}
title="Delete project?"
message="This action cannot be undone."
confirmLabel="Delete project"
cancelLabel="Keep project"
isDanger
onConfirm={() => setStatus('Deleted')}
onCancel={() => setStatus('Kept')}
/>
</>
);
}
export default DialogDestructive;
HTML markup Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Uncontrolled
JSX usage Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
Copy install command bun add @kongmy-dev/sapphire-ui react react-dom radix-ui
Copy JSX "use client";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { Input } from "@kongmy-dev/sapphire-ui/input";
import { Label } from "@kongmy-dev/sapphire-ui/label";
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@kongmy-dev/sapphire-ui/dialog";
function DialogUncontrolled() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Open dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit profile</DialogTitle>
</DialogHeader>
<DialogBody className="sp-stack">
<DialogDescription>Update your public profile.</DialogDescription>
<div className="sp-stack" data-size="sm">
<Label htmlFor="dialog-name">Display name</Label>
<Input id="dialog-name" defaultValue="Alex" />
</div>
</DialogBody>
<DialogFooter>
<DialogClose asChild>
<Button>Save changes</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export default DialogUncontrolled;
HTML markup Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Without Close
JSX usage Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.
Copy install command bun add @kongmy-dev/sapphire-ui react react-dom radix-ui
Copy JSX "use client";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@kongmy-dev/sapphire-ui/dialog";
function DialogWithoutClose() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Open without close icon</Button>
</DialogTrigger>
<DialogContent hideClose>
<DialogHeader>
<DialogTitle>Review details</DialogTitle>
</DialogHeader>
<DialogBody>
<DialogDescription>
Use the action below or Escape to close.
</DialogDescription>
</DialogBody>
<DialogFooter>
<DialogClose asChild>
<Button>Return</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export default DialogWithoutClose;
HTML markup Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.
Props Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.
DialogOverlay DialogOverlay component props Prop Type Required Local default forceMounttrue | undefinedNo — asChildboolean | undefinedNo —
Inherited HTML / React props (280) DialogOverlay common platform props Prop Type Required Local default styleimport("react").CSSProperties | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLDivElement, Element> | undefinedNo — refimport("react").Ref<HTMLDivElement> | undefinedNo —
All inherited prop names:
slot style title key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce spellCheck tabIndex translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture ref
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogContent DialogContent component props Prop Type Required Local default forceMounttrue | undefinedNo — asChildboolean | undefinedNo — deferPointerDownOutsideboolean | undefinedNo — onEscapeKeyDown((event: KeyboardEvent) => void) | undefinedNo — onPointerDownOutside((event: CustomEvent<{ originalEvent: PointerEvent; }>) => void) | undefinedNo — onFocusOutside((event: CustomEvent<{ originalEvent: FocusEvent; }>) => void) | undefinedNo — onInteractOutside((event: CustomEvent<{ originalEvent: PointerEvent; }> | CustomEvent<{ originalEvent: FocusEvent; }>) => void) | undefinedNo — onOpenAutoFocus((event: Event) => void) | undefinedNo — onCloseAutoFocus((event: Event) => void) | undefinedNo — maxWidthstring | undefinedNo — hideCloseboolean | undefinedNo falsecloseLabelstring | undefinedNo 'Close'
Inherited HTML / React props (280) DialogContent common platform props Prop Type Required Local default styleimport("react").CSSProperties | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLDivElement, Element> | undefinedNo — refimport("react").Ref<HTMLDivElement> | undefinedNo —
All inherited prop names:
slot style title key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce spellCheck tabIndex translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture ref
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogHeader No additional Sapphire props; accepts the platform props below.
Inherited HTML / React props (280) DialogHeader common platform props Prop Type Required Local default refimport("react").Ref<HTMLDivElement> | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — styleimport("react").CSSProperties | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLDivElement, Element> | undefinedNo —
All inherited prop names:
ref key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce slot spellCheck style tabIndex title translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogTitle DialogTitle component props Prop Type Required Local default asChildboolean | undefinedNo —
Inherited HTML / React props (280) DialogTitle common platform props Prop Type Required Local default styleimport("react").CSSProperties | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLHeadingElement, Element> | undefinedNo — refimport("react").Ref<HTMLHeadingElement> | undefinedNo —
All inherited prop names:
slot style title key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce spellCheck tabIndex translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture ref
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogDescription DialogDescription component props Prop Type Required Local default asChildboolean | undefinedNo —
Inherited HTML / React props (280) DialogDescription common platform props Prop Type Required Local default styleimport("react").CSSProperties | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLParagraphElement, Element> | undefinedNo — refimport("react").Ref<HTMLParagraphElement> | undefinedNo —
All inherited prop names:
slot style title key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce spellCheck tabIndex translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture ref
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogBody No additional Sapphire props; accepts the platform props below.
Inherited HTML / React props (280) DialogBody common platform props Prop Type Required Local default refimport("react").Ref<HTMLDivElement> | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — styleimport("react").CSSProperties | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLDivElement, Element> | undefinedNo —
All inherited prop names:
ref key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce slot spellCheck style tabIndex title translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogFooter No additional Sapphire props; accepts the platform props below.
Inherited HTML / React props (280) DialogFooter common platform props Prop Type Required Local default refimport("react").Ref<HTMLDivElement> | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — styleimport("react").CSSProperties | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLDivElement, Element> | undefinedNo —
All inherited prop names:
ref key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce slot spellCheck style tabIndex title translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
ConfirmDialog ConfirmDialog component props Prop Type Required Local default openbooleanYes — onOpenChange(open: boolean) => voidYes — titlestringYes — messagestringYes — confirmLabelstring | undefinedNo 'Confirm'cancelLabelstring | undefinedNo 'Cancel'onConfirm() => voidYes — onCancel(() => void) | undefinedNo — isDangerboolean | undefinedNo falsechildrenReactNodeNo —
Dialog Dialog component props Prop Type Required Local default childrenReactNodeNo — openboolean | undefinedNo — defaultOpenboolean | undefinedNo — onOpenChange((open: boolean) => void) | undefinedNo — modalboolean | undefinedNo —
DialogTrigger DialogTrigger component props Prop Type Required Local default asChildboolean | undefinedNo —
Inherited HTML / React props (290) DialogTrigger common platform props Prop Type Required Local default styleimport("react").CSSProperties | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLButtonElement, Element> | undefinedNo — disabledboolean | undefinedNo — namestring | undefinedNo — type"button" | "submit" | "reset" | undefinedNo — valuestring | number | readonly string[] | undefinedNo — refimport("react").Ref<HTMLButtonElement> | undefinedNo —
All inherited prop names:
form slot style title key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce spellCheck tabIndex translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture disabled formAction formEncType formMethod formNoValidate formTarget name type value ref
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogClose DialogClose component props Prop Type Required Local default asChildboolean | undefinedNo —
Inherited HTML / React props (290) DialogClose common platform props Prop Type Required Local default styleimport("react").CSSProperties | undefinedNo — defaultValuestring | number | readonly string[] | undefinedNo — classNamestring | undefinedNo — idstring | undefinedNo — tabIndexnumber | undefinedNo — roleimport("react").AriaRole | undefinedNo — aria-labelstring | undefinedNo — childrenReactNodeNo — onChangeimport("react").ChangeEventHandler<HTMLButtonElement, Element> | undefinedNo — disabledboolean | undefinedNo — namestring | undefinedNo — type"button" | "submit" | "reset" | undefinedNo — valuestring | number | readonly string[] | undefinedNo — refimport("react").Ref<HTMLButtonElement> | undefinedNo —
All inherited prop names:
form slot style title key defaultChecked defaultValue suppressContentEditableWarning suppressHydrationWarning accessKey autoCapitalize autoFocus className contentEditable contextMenu dir draggable enterKeyHint hidden id lang nonce spellCheck tabIndex translate radioGroup role about content datatype inlist prefix property rel resource rev typeof vocab autoCorrect autoSave color itemProp itemScope itemType itemID itemRef results security unselectable popover popoverTargetAction popoverTarget inert inputMode is exportparts part aria-activedescendant aria-atomic aria-autocomplete aria-braillelabel aria-brailleroledescription aria-busy aria-checked aria-colcount aria-colindex aria-colindextext aria-colspan aria-controls aria-current aria-describedby aria-description aria-details aria-disabled aria-dropeffect aria-errormessage aria-expanded aria-flowto aria-grabbed aria-haspopup aria-hidden aria-invalid aria-keyshortcuts aria-label aria-labelledby aria-level aria-live aria-modal aria-multiline aria-multiselectable aria-orientation aria-owns aria-placeholder aria-posinset aria-pressed aria-readonly aria-relevant aria-required aria-roledescription aria-rowcount aria-rowindex aria-rowindextext aria-rowspan aria-selected aria-setsize aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext children dangerouslySetInnerHTML onCopy onCopyCapture onCut onCutCapture onPaste onPasteCapture onCompositionEnd onCompositionEndCapture onCompositionStart onCompositionStartCapture onCompositionUpdate onCompositionUpdateCapture onFocus onFocusCapture onBlur onBlurCapture onChange onChangeCapture onBeforeInput onBeforeInputCapture onInput onInputCapture onReset onResetCapture onSubmit onSubmitCapture onInvalid onInvalidCapture onLoad onLoadCapture onError onErrorCapture onKeyDown onKeyDownCapture onKeyPress onKeyPressCapture onKeyUp onKeyUpCapture onAbort onAbortCapture onCanPlay onCanPlayCapture onCanPlayThrough onCanPlayThroughCapture onDurationChange onDurationChangeCapture onEmptied onEmptiedCapture onEncrypted onEncryptedCapture onEnded onEndedCapture onLoadedData onLoadedDataCapture onLoadedMetadata onLoadedMetadataCapture onLoadStart onLoadStartCapture onPause onPauseCapture onPlay onPlayCapture onPlaying onPlayingCapture onProgress onProgressCapture onRateChange onRateChangeCapture onSeeked onSeekedCapture onSeeking onSeekingCapture onStalled onStalledCapture onSuspend onSuspendCapture onTimeUpdate onTimeUpdateCapture onVolumeChange onVolumeChangeCapture onWaiting onWaitingCapture onAuxClick onAuxClickCapture onClick onClickCapture onContextMenu onContextMenuCapture onDoubleClick onDoubleClickCapture onDrag onDragCapture onDragEnd onDragEndCapture onDragEnter onDragEnterCapture onDragExit onDragExitCapture onDragLeave onDragLeaveCapture onDragOver onDragOverCapture onDragStart onDragStartCapture onDrop onDropCapture onMouseDown onMouseDownCapture onMouseEnter onMouseLeave onMouseMove onMouseMoveCapture onMouseOut onMouseOutCapture onMouseOver onMouseOverCapture onMouseUp onMouseUpCapture onSelect onSelectCapture onTouchCancel onTouchCancelCapture onTouchEnd onTouchEndCapture onTouchMove onTouchMoveCapture onTouchStart onTouchStartCapture onPointerDown onPointerDownCapture onPointerMove onPointerMoveCapture onPointerUp onPointerUpCapture onPointerCancel onPointerCancelCapture onPointerEnter onPointerLeave onPointerOver onPointerOverCapture onPointerOut onPointerOutCapture onGotPointerCapture onGotPointerCaptureCapture onLostPointerCapture onLostPointerCaptureCapture onScroll onScrollCapture onScrollEnd onScrollEndCapture onWheel onWheelCapture onAnimationStart onAnimationStartCapture onAnimationEnd onAnimationEndCapture onAnimationIteration onAnimationIterationCapture onToggle onBeforeToggle onTransitionCancel onTransitionCancelCapture onTransitionEnd onTransitionEndCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture disabled formAction formEncType formMethod formNoValidate formTarget name type value ref
ARIA attributes and native event handlers keep their React types. data-* attributes are also accepted by React.
DialogPortal DialogPortal component props Prop Type Required Local default childrenReactNodeNo — containerElement | DocumentFragment | null | undefinedNo — forceMounttrue | undefinedNo —
Setup Copy code bun add @kongmy-dev/sapphire-ui react react-dom radix-ui
For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.
Copy code import "@kongmy-dev/sapphire-ui/sapphire.css";
import { Dialog } from "@kongmy-dev/sapphire-ui/dialog";
Mixing package and vendored components? Follow application setup .