Notification

Default

import { Notification } from '@davaux/ui'

<Notification title="Update available" message="A new version is ready to install." />

Colors

<Notification color="blue" title="Info" message="Request processing." icon={infoIconHtml} />
<Notification color="green" title="Success" message="Changes saved." icon={checkIconHtml} />
<Notification color="yellow" title="Warning" message="Session expiring soon." />
<Notification color="red" title="Error" message="Something went wrong." />

Without close button

<Notification
  color="violet"
  title="Persistent"
  message="Cannot be dismissed."
  withCloseButton={false}
/>

Motion

Notifications enter with the dv-slide-up-in keyframe — fading in while translating up 8px — at --dv-motion-duration-normal (200ms) with --dv-motion-ease-enter easing. This matches the Modal enter so stacked UI events feel consistent.

Override the animation on .dv-notification to match a custom motion system or to slot into a toast queue with a different feel:

/* Faster, snappier notification */
.dv-notification {
  animation-duration: var(--dv-motion-duration-fast);
}

/* Slide in from the right instead */
.dv-notification {
  animation-name: dv-slide-left-in;
}

See the Motion page for all available keyframes and tokens.