modal

children
Not required
node
className
Not required
string
label
Not required
node
Typically a string, but you can use JSX for more customizability.
ariaLabel
Not required
string
A label that describes the modal on screen readers. Add this if you don't provide a label, or if you provide a JSX label.
onClose
Required
func
loading
Not required
bool
false
width
Not required
string/number
size
Not required
("md" | "lg" | "full" | "fullscreen" | "custom")
"md"
You don't need to provide this if you set a `width`.
hideCloseButton
Not required
bool
false
hideHeader
Not required
bool
false
Hides the header
separator
Not required
bool
forces the separator under the title even when there are no Actions

Sizes

Modal without Action

Using the confirm modal

To easily use a confirm modal with actions YES/NO, you may use the confirm function

import confirm from "@kit/design/modal/confirm"

const result = await confirm("Are you sure?", { confirm: "Yes", cancel: "No" })

Using a modal with a custom title bar

You can pass JSX into the label prop if you need a more customized title.

If you do this, you should also pass an ariaLabel prop that describes the modal.

Separator

By default, our modal have a separator line between the title and the content only when Actions are used. If you want to show the separator even when there are no actions, you can use the separator prop.