Usage
Built on top of the Modal component, the DashboardModal contains a header, body and footer.
Its header matches exactly the DashboardNavbar on mobile and contains a close button matching the DashboardSlideover and DashboardSearch.
Use the title, description and icon props to customize the modal.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}Slots
icon
{}
title
{}
description
{}
default
{}
footer
{}
header
{}
Props
icon
string
undefinedtitle
string
undefineddescription
string
undefinedcloseButton
Button
{}ui
any
{}modelValue
boolean
falsepreventClose
boolean
falseConfig
{
rounded: 'sm:rounded-lg',
shadow: 'sm:shadow-xl',
width: 'sm:max-w-xl',
height: 'h-dvh sm:h-auto',
padding: 'p-0',
header: {
base: 'flex items-start justify-between gap-x-1.5 flex-shrink-0 min-h-[--header-height]',
inner: 'flex items-start gap-4',
wrapper: '',
padding: 'px-4 py-4 sm:px-6'
},
body: {
base: 'flex-1 flex flex-col gap-y-3 overflow-y-auto',
padding: 'px-4 py-5 sm:p-6'
},
footer: {
base: 'flex items-center gap-x-1.5 flex-shrink-0',
padding: 'px-4 py-4 sm:px-6'
},
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
icon: {
wrapper: 'inline-flex',
base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
},
default: {
closeButton: {
icon: 'i-heroicons-x-mark-20-solid',
color: 'gray',
variant: 'ghost',
size: 'sm'
}
}
}