Skip to content
DOL Studio

Modal

Design: Stable Code: Coded overlaydialogbottom-sheet 18 Figma sets 18 standalone Modal header content/General text, icon

Live preview

Inline preview (default confirm modal open by default, scoped to container)
Simulate · Confirm — md (default)
Small — sm, single action
Large — lg, scrollable body
Non-dismissible — must click action

Import & files

Import
import { Modal } from "@dol/ui/modal";
Source file
packages/@dol/ui/src/modal/Modal.tsx

Figma source

Figma source 18 sets
Page
Modal
Sets
18 + 18 standalone
Primary set
Modal header content/General text, icon · 4 variants Open in Figma →
Showing: Modal header content/General text, icon
11 other sets (+ 6 more not listed)
  • Demonstrate/Table select modal/Reorder by drag and drop 3 variants Figma →
  • Demonstrate/Table select modal/Select single item 3 variants Figma →
  • Filter/Item/Select all, Remove all 3 variants Figma →
  • Item/Button modal 36 variants Figma →
  • Listing/Table/Listing Select/Sample/Multi item 3 variants Figma →
  • Listing/Table/Listing Select/Sample/Single item 2 variants Figma →
  • Modal body content/Simple text 2 variants Figma →
  • Modal footer 10 variants Figma →
  • Modal footer content/Add-on only 1 variants Figma →
  • Modal footer content/Button + add-on 2 variants Figma →
  • Modal footer content/Button group 3 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Modal
Slug: `modal`
Domain: general · Category: overlay
Design: stable · Code: coded


## Description
Center-anchored dialog + bottom-sheet (mobile) variants. 18 sets across template/info/select/dropdown shapes; standalone bottom-sheets handle edge formats.


## Import
```ts
import { Modal } from "@dol/ui/modal";
```
Source: `packages/@dol/ui/src/modal/Modal.tsx`


## Figma source
Page: Modal
Sets: 18
Primary: Modal header content/General text, icon
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7566-85023

Related

  • M
    overlay

    KidModal

    KIDCoded
  • T
    overlay

    Tooltip & Dialog box

    Coded
  • Tooltip body

    Popover

    Coded
  • D
    overlay

    Drawer

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).