Skip to content
DOL Studio

KidModal

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

Live preview

Live preview not yet wired for slug (none).

80 components have live demos. If this slug should have one, add it to DEMO_REGISTRY in ComponentDemo.tsx.

Import & files

Import
import { KidModal } from "@/components/Domains/DolKid/ui/KidParentPasscodeModal";
Source file
components/Domains/DolKid/ui/KidParentPasscodeModal.tsx
Related files
  • components/Domains/DolKid/ui/KidAvatarPickerModal.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. 

# KidModal
Slug: `modal`
Domain: kid · 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 { KidModal } from "@/components/Domains/DolKid/ui/KidParentPasscodeModal";
```
Source: `components/Domains/DolKid/ui/KidParentPasscodeModal.tsx`
Related: `components/Domains/DolKid/ui/KidAvatarPickerModal.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

    Modal

    Coded
  • Chọn ảnh đại diện

    KidAvatarPickerModal

    KIDCode only

  • KidParentPasscodeModal

    KIDCode only
  • 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).