DSMU Design System for Mauritius

Feedback & status

Loading indicators, transient messages, dialogs and tooltips.

Loading spinner

Announces its status (role="status") and slows rather than freezing under reduced motion.

Spinner
Show code
<DsmuSpinner label="Checking your details…" />

Toast

A live-region notification. There is no auto-dismiss timer in the component, so a reader is never rushed.

Toast
Your application was submitted.
Show code
<DsmuToast variant="success" @dismiss="show = false">
  Your application was submitted.
</DsmuToast>

Modal dialog

Built on the native <dialog> element — focus trapping, Escape to close, and an inert background for free.

Modal

Confirm deletion

Are you sure you want to delete this record? This cannot be undone.

Show code
<DsmuButton @click="open = true">Delete</DsmuButton>
<DsmuModal v-model:open="open" title="Confirm deletion">
  <p>Are you sure? This cannot be undone.</p>
  <template #footer>
    <DsmuButton>Delete</DsmuButton>
    <DsmuButton variant="secondary" @click="open = false">Cancel</DsmuButton>
  </template>
</DsmuModal>

Tooltip

Shows on hover and focus with no JavaScript; Escape dismisses it (WCAG 1.4.13). Prefer hint text for essential information.

Tooltip

National Identity number Your 10-digit National Identity number, printed on your ID card.

Show code
<DsmuTooltip text="Your 10-digit National Identity number.">
  What is this?
</DsmuTooltip>

Skeleton

A decorative loading placeholder (always aria-hidden); the real loading state is announced elsewhere.

Skeleton
Show code
<DsmuSkeleton variant="text" width="80%" />
<DsmuSkeleton variant="text" width="60%" />