COMPONENTS · OVERLAYS

Modal examples

Every dialog, drawer and sheet in Avava — click Open to try the real thing. Press ⌘K anywhere.

DEFAULT SIZE

  • CONFIRMS · 2 actions

    Destructive confirm

    Irreversible actions. Type the name to unlock the button.

    Invoice → Delete · Projects → Archive

  • CONFIRMS · 3 actions

    Unsaved changes

    Leaving a form with edits. Three clear exits.

    Invoice Edit · Form · Create Deal

  • CONFIRMS · timer

    Session expiring

    Auto sign-out warning with a live countdown.

    Global · after 30 min idle

  • CONFIRMS · 2 actions

    Success

    Confirms something big happened and offers the next step.

    Invoice Add → Sent

  • FORMSM · chips input

    Invite teammates

    Email chips, role picker, copy-link fallback.

    Users → List · Team

  • FORMSM · 1 primary

    Quick create

    A short form to create one thing fast.

    Calendar → New event

  • FORMSL · validation

    Edit record

    Two-column form with inline validation.

    Data List → Edit client

  • FORMSM · rating

    Feedback

    One-tap rating, optional topics and text.

    After new features ship

  • MEDIAFull · keyboard

    Lightbox

    Full-screen gallery. ← → keys, thumbnails, download.

    File Manager · Post · Profile

  • MEDIAM · progress

    Upload

    Drop zone with per-file progress and errors.

    File Manager · Brief attachments

  • MEDIAM · settings

    Share link

    Access level, expiry and who already has access.

    File Manager · Proposals

  • FLOWSM · 3 steps

    Multi-step dialog

    2–4 short steps without leaving the page.

    Calendar → Client review

  • FLOWSTop · search

    Command palette

    Jump anywhere or run an action. ⌘K.

    Global · ⌘K / Ctrl+K

  • FLOWSS · dots

    Onboarding tour

    Short feature intro, skippable, 4 steps.

    First login · new features

  • SHEETSRight · 460 px

    Side drawer

    Record details next to the list you’re in.

    Data List · Calendar event

  • SHEETSBottom · full width

    Bottom sheet

    Action list on small screens.

    Mobile · file actions

  • SHEETSAnchored · 240 px

    Popover menu

    Small anchored menu for row actions.

    Tables · cards ⋯ menus

Which one should I use?

  • ModalThe user must decide or finish something before going on.Confirm, short forms, multi-step
  • DrawerLook at or edit details without losing the list behind.Records, events, filters
  • Sheet & popoverA few actions tied to one item. Sheet on mobile, popover on desktop.Row ⋯ menus, file actions
  • ToastSomething happened and nothing is required. Offer Undo.Saved, sent, deleted
  • Esc and click outside close
  • Focus returns to the trigger
  • Max one primary action
  • Destructive is coral and right-most
  • Never stack two modals