Modal

Default

import { Modal } from '@davaux/ui'

<Modal
  triggerLabel="Open modal"
  title="Modal title"
  body="This is the modal body content."
/>

Sizes

<Modal triggerLabel="Small" title="Small modal" size="sm" body="..." />
<Modal triggerLabel="Medium" title="Medium modal" size="md" body="..." />
<Modal triggerLabel="Large" title="Large modal" size="lg" body="..." />

Centered

<Modal
  triggerLabel="Open centered"
  title="Centered modal"
  body="Vertically centered in the viewport."
  centered
/>

Full screen

<Modal
  triggerLabel="Open fullscreen"
  title="Fullscreen modal"
  body="Covers the entire viewport."
  fullScreen
/>

Motion

The modal content enters with the dv-slide-up-in keyframe — it fades in while translating up 8px. The backdrop fades in separately with dv-fade-in. Both run at --dv-motion-duration-normal (200ms) with --dv-motion-ease-enter easing.

To adjust the animation, override animation-duration or animation-timing-function on .dv-modal-content. For the spring variant:

/* Spring-feel modal entrance */
.dv-modal-content {
  animation-duration: var(--dv-motion-duration-slow);
  animation-timing-function: var(--dv-motion-ease-spring);
}

See the Motion page for the full keyframe and token reference.