Skip to main content

Modal


Example

<>
<Button
size="medium"
kind="solid"
hierarchy="primary"
label="Click me!"
onPress={() => setIsOpen(true)}
/>
{isOpen && (
<Modal
title="Modal"
onClose={() => setIsOpen(false)}
primaryAction={{
label: "OK",
onPress: () => setIsOpen(false),
}}
secondaryAction={{
label: "Cancel",
onPress: () => setIsOpen(false),
}}
>
<Body size="medium">Content</Body>
</Modal>
)}
</>

Props

NameTypeDefault ValueRequiredDescription
titlestringYes
primaryActionOmit<Props, "size" | "kind" | "hierarchy">No
secondaryActionOmit<Props, "size" | "kind" | "hierarchy">No
onClose() => voidYes
closeButtonLabelstringNo
isDestructivebooleanNo

@deprecated use kind='destructive' instead

loadingMessagestringNo
errorstringNo
errorBannerWidth"content" | "fill"No
size"small" | "large" | "medium" | "wide"No
kind"normal" | "warning" | "destructive"No
autoFocusbooleanNo