Skip to content
DOL Studio

DOL Figma Component Registry - Index

auto-generated - re-run generator after Figma extraction to refresh

Source file: DOL Design System V2 (key: DqRd7UQkNGcdvYL5fwZxlf) Counts: 532 component sets · 2782 standalone components across 46 detail files

Filters: excluded 37 legacy-named · 5260 non-allowlisted (Icons + Emoji pages keep only Icon filled/* · Icon Filled/* · Icon 1.5/* · 3demoji/* · Program logo* · Checkbox-Radio* · .Checkbox-Radio* · Chip* · .Chip*)

How to use

Section titled “How to use”

3-tier access - pick the cheapest path for your task:

NeedUse
1 component key by exact namepython3 tools/lookup.py component <name> (precise, ~200 tokens output)
Variants + properties for 1 componentpython3 tools/lookup.py variants <name> OR open the detail file below
List all components on a pageThis index (preview) OR components/<slug>.md for full enumeration
Explore what DS hasThis index (~250 lines) - see categories below

Detail files (components/<slug>.md) carry the full variant property schemas. This index has 3-key preview per file for fast “does X exist?” checks.

Citation format: <component-name> → key abc123... (from index OR detail). For instantiation flow see workflows.md Workflow 5.

Button

Section titled “Button”

components/button.md · 40 sets · 1 standalone

Preview:

  • .Button icon → 783b9c782d5b6dd44d920768ffa84c2d7f9ffe6a (set)
  • .Button icon/Secondary/Size → 33eef6e4c376aa88e4863121357f25390f114360 (set)
  • .Button icon/Touch/Size → c9b37ba2dfb4f72ac258a1d6085a51e258ff915a (set)
  • … 38 more in detail file

Input

Section titled “Input”

components/input.md · 87 sets · 267 standalone

Preview:

  • .Input Item/Subtext → bffa998abcc802f163c7338087a05ea2127ef9e1
  • Abkhazia → d4be1d57c356851164da5859600b9c7ba0b9aba6
  • Afghanistan → 5d7f7f0f43dafbd0d2d75ea61f0740a8731b8734
  • … 351 more in detail file

InputNumber

Section titled “InputNumber”

components/input-number.md · 1 sets · 0 standalone

Preview:

  • InputNumber → 2a147eadeec4c4647c6b7584e4376ea89b0e41e8 (set)

Select input

Section titled “Select input”

components/select-input.md · 43 sets · 0 standalone

Preview:

  • .Select button/Size → 3964d6a1ec0a27aa7cb0f719092c61aa6e5e7c26 (set)
  • Dropdown content/Empty state search dropdown → 891bcb409423fa665ba6cee3cfbd420c0d872ab2 (set)
  • Dropdown item content/General → 9234d471cf53d213ece9e4428d5195c5dff3f633 (set)
  • … 40 more in detail file

DatePicker

Section titled “DatePicker”

components/datepicker.md · 11 sets · 5 standalone

Preview:

  • Date picker → 5591ebcf3686a303d28fab2e49d137646b25fcaf (set)
  • Date picker / Date Range dropdown → acbbe2fb90c470598a8b51dcd22666675b7e7caa
  • Date picker / Date Range dropdown advance → 977e64f70f6e3471e534abc418eb7de27315445e
  • … 13 more in detail file

Checkbox

Section titled “Checkbox”

components/checkbox-radio.md · 4 sets · 0 standalone

Preview:

  • .Checkbox-Radio/Size/Group → bcff736ba19914cc85d49d4e83f8dbfadc4046aa (set)
  • .Checkbox-Radio/Size/Single → b2ae759635398fc57827ab126ff3125324fc9b72 (set)
  • Checkbox-Radio/Group → 7b55a3a1bec2810415da5a91538e5a3652e67b71 (set)
  • … 1 more in detail file

Chip

Section titled “Chip”

components/chip.md · 4 sets · 0 standalone

Preview:

  • .Chip select/Size → ceb5e058fd4d2f934f82b59238cb800644a8d399 (set)
  • .Chip/Size → dafc8cf8a1c944497e08a2626735edfa9a4d5545 (set)
  • Chip → c5e584409bd8f67f12380a0320a8a3e0473501f3 (set)
  • … 1 more in detail file

Table

Section titled “Table”

components/table.md · 6 sets · 0 standalone

Preview:

  • Header content/Component type → b55601b7bad2e0a9ef11a249fc87e2148cdaaee5 (set)
  • Table cell content/General (Simple) → 4da2194493a0f1013378b870d7c3a2d661c9cefd (set)
  • Table cell header/Light style/General → b24a01d9c90e450ee526d01e1733818e49ed007d (set)
  • … 3 more in detail file

Uploader

Section titled “Uploader”

components/uploader.md · 40 sets · 2 standalone

Preview:

  • .Layout/UploadFileComponent → a79910a059bf0496549a5940e771bb84bf57499d (set)
  • .Upload/content/general file upload → 89c53a13ff54cce5e2db2029707cf8b09ecf655b (set)
  • Element/Select/Audio → 12644df35d5d3a67b07d0d4f251698d8988211ef (set)
  • … 39 more in detail file
Section titled “Modal”

components/modal.md · 18 sets · 18 standalone

Preview:

  • Bottom sheet template/Info → ac74c4196f906ec24fde36bb93cc6a7c04c1a8e4
  • Bottom sheet template/Select → 774c66ba8edeb3f71dea533474737590252cd942
  • Bottom sheet/Dropdown w title → 4e4076c6f96398d6b604badc092c5c92121c4109
  • … 33 more in detail file

Tooltip & Dialog box

Section titled “Tooltip & Dialog box”

components/tooltip-dialog.md · 10 sets · 1 standalone

Preview:

  • Dialog box/Blue outline → 257629e81b8d78274a25bf1b21ed00147da69b8e (set)
  • Dialog box/Brand outline → b2de6dffb80a8c198142657d64e74270efdfb70f (set)
  • Dialog box/Primary → 98012ecaf82878cfde2f00c4b002e674e8d98e15 (set)
  • … 8 more in detail file

Drawer

Section titled “Drawer”

components/drawer.md · 1 sets · 3 standalone

Preview:

  • Drawer right/Footer → d80e2581540f9801d364e6e10bdc2fff01c2c574
  • Drawer right/Header → 7805b8e62b5b5b0a9acc7ad85180c204aa987414
  • Filter drawer content/Sample filter list 2 → cb737ea2762b16d7d13cb5ad3365ca7dab57f59c
  • … 1 more in detail file

Toast

Section titled “Toast”

components/toast.md · 3 sets · 1 standalone

Preview:

  • Designlog/Toast → 4cf8ca565501cb06562e070939ec7ce597e93489
  • Toast alert/Style 1 → 77e54ef2d89268489523e088d84dc163a1134008 (set)
  • Toast alert/Style 1 vertical → 8ca4714c1428f3468b51b0ee50d05816c5ad5b64 (set)
  • … 1 more in detail file

Popover

Section titled “Popover”

components/popover.md · 8 sets · 2 standalone

Preview:

  • .Item/Tooltip arrow/Bottom → e2461da44b27aad99b940cab4b6af6576f8253f8 (set)
  • .Item/Tooltip arrow/Left → 07d342c44986253bb12b9f914b7544ee9e4dae07 (set)
  • .Item/Tooltip arrow/Right → ad0c4da7e67abcf06e6fb1db5f693688c43f3b31 (set)
  • … 7 more in detail file

Alert

Section titled “Alert”

components/alert.md · 7 sets · 0 standalone

Preview:

  • .Alert/Simple tooltip/Element tooltip container → 2397d10ae53a7409e1130a7d7aca7fe0c9ed582d (set)
  • .Alert/Simple tooltip/Size → 7feb8328ba183847e8213caa566a2a2d5890bb11 (set)
  • Alert/Complex block Alert → 162e5c46948a8ae0694c7efbfbc4ed88c7de6796 (set)
  • … 4 more in detail file
Section titled “Sidebar”

components/sidebar.md · 15 sets · 0 standalone

Preview:

  • .Sidebar/Menu item/Content/HV General → 170cd0b4c1736104389ba07a3f4d680032631ef1 (set)
  • Menu drawer/Menu item/Student view/1st → 684df1ea21b1c103e86745b20d7a96e78219951c (set)
  • Sideba menu item content/Data check, nhập liệu → 06a3fa68e58ad66a9f53da7e24aea1c8f8e638fe (set)
  • … 12 more in detail file

Tabbar, Toggle

Section titled “Tabbar, Toggle”

components/tabbar-toggle.md · 16 sets · 0 standalone

Preview:

  • .Tabbar/Item/Tab button item line style → 7749cc1b98c97ddae0bded36140eab4c33352680 (set)
  • .Tag item/Size → c348fd08b4f5bc0fb02f5f5532abca3ebc053b14 (set)
  • Button icon secondary/Element tooltip container → d1fdedfbede8c17b0ecad4ac5e3029a55def84ca (set)
  • … 13 more in detail file

Switch

Section titled “Switch”

components/switch.md · 3 sets · 5 standalone

Preview:

  • .Layout/Switch group → 0a91cbbb5b362d9242121dd1cff47a6563ebb199
  • .master/switch/large/active → 2a9c332015c4b12e7c15926974eea3c266040a37
  • .master/switch/large/inactive → ff386159e7dd61389537124583323664491bd001
  • … 5 more in detail file
Section titled “Footer”

components/footer.md · 1 sets · 0 standalone

Preview:

  • Footer/End Section → 5da8dbea2e5c5d246bf8d953a3ef4bab606718fd (set)

Steps

Section titled “Steps”

components/steps.md · 6 sets · 0 standalone

Preview:

  • Element/Process line → d3525cac68e694f4ff1610087f883af6bfdc5a0a (set)
  • Element/Step icon → 3d5b80976325d2099cce801e2faa9b00c08175d1 (set)
  • Element/Step number label → 09bcc9899b297879e54050fd38b6a40dd0f7b32f (set)
  • … 3 more in detail file

Avatar, User

Section titled “Avatar, User”

components/avatar-user.md · 21 sets · 4 standalone

Preview:

  • .Avatar/Item/Edit button → fe1f7629e8de530f12c48eabd1f15a136f8f8778
  • Avatar/Multi avatar display → e35fd61180c269b494f280625f3b8922977078e5 (set)
  • Badge item/Dạy thay status → 914ba8cf55158eb2cfdbab00c1e4673b022d90de (set)
  • … 22 more in detail file

Media

Section titled “Media”

components/media.md · 35 sets · 2 standalone

Preview:

  • .Audio player content/Audio simple with Wave sound → 96da217f7fb629a05e8028c0d48359d63e1d88bf (set)
  • Audio player item/Volume control → 4864e27089dc6cb584fae559f09fa62bf67d9b9a (set)
  • Audio player item/Volume control vertical → 6dbc93448b4db5c39df2b4f35cef9b68688056a9 (set)
  • … 34 more in detail file

Text content

Section titled “Text content”

components/text-content.md · 1 sets · 0 standalone

Preview:

  • Text content/Date difference → ecb8a081ce0edf33e9c36d65accb5e3534dd719f (set)

Report

Section titled “Report”

components/report.md · 2 sets · 1 standalone

Preview:

  • Button/Bug Report → 36e54cadd39aec7733f10e6f24bf08a7e5632032 (set)
  • Modal/Report sample → bbf35ec35fdfd0a810c9c528f63a711a77ec326d
  • Report form content sample → e5940ec7b5eb5a2c226b2b30a77a7a15baf3b0e4 (set)

Divider

Section titled “Divider”

components/divider.md · 6 sets · 0 standalone

Preview:

  • .Dot slide/Dot → a35e36d3f77db2768f34c1ceba2d4125cb5492e5 (set)
  • Divider horizontal → fbde413b35e3cb24ad409a2141f0d8af87bd2fa7 (set)
  • Divider vertical → 3bba03887bfb43608ee35486f4a2a65e48a90df9 (set)
  • … 3 more in detail file

Pagination

Section titled “Pagination”

components/pagination.md · 6 sets · 1 standalone

Preview:

  • Pagination item/Addition → 8a2ee3509ffc748b10e07edabdcde9a97aeb0323 (set)
  • Pagination item/Page number button → e121b11e9c9f06934a52e0fc94aedad3d6693be5 (set)
  • Pagination item/View per page → 024f7c453937eccc22568444b0756c95d4a26fee (set)
  • … 4 more in detail file

Slider

Section titled “Slider”

components/slider.md · 7 sets · 3 standalone

Preview:

  • .Slider/Item/Handle → 7e0321b7863f7fd11c15658cdb0582174e4e5242 (set)
  • .Slider/Item/Mark → cd223d2cccc3420ed883373440f2233ca8b3a1ab (set)
  • .Slider/Item/Rail → 12e6b746b37730f37dc65812b3aeb9d2e7791d8c (set)
  • … 7 more in detail file

Badge

Section titled “Badge”

components/badge.md · 2 sets · 0 standalone

Preview:

  • .Badge/Layout → c0707996866132bba99d529888e72718e7da2a09 (set)
  • Badge/Style → a950c442058baec91cb9b753cd65cb47b50cb4e4 (set)

Empty state

Section titled “Empty state”

components/empty-state.md · 5 sets · 0 standalone

Preview:

  • Content/Empty message → 13536c9e23046a6a973af1b3dba8f0f5973c9136 (set)
  • Empty state general → 2fbc11fdec00ccc3ece2797cbe3c844d117291d3 (set)
  • Empty state w image → b6bbda026f934a3893b2bed4bbabfa306bc58c7b (set)
  • … 2 more in detail file

Tag

Section titled “Tag”

components/tag.md · 8 sets · 0 standalone

Preview:

  • .Remove tag/Close icon/General → cb6c255dde2b40a164f2dcb7c3795fff829c10ea (set)
  • .Remove tag/Close icon/Size → 4f9d096826e71dcf2b7b859255ff9d3b2a6e98af (set)
  • .Tag content/Layout → 964d4e10dcf31622d2b2c354097d6c9f3d6a58d7 (set)
  • … 5 more in detail file

Progress

Section titled “Progress”

components/progress.md · 5 sets · 3 standalone

Preview:

  • Line pattern → 26bd820e613c712267876d85d0fbfd28792c24e5
  • Line pattern for chart → e76ecbcd97281c247e37d4265d439e94405c5337
  • Progress / Bar → 6dd1007154528cb95ab13a7ac8b18c1228acd1c3 (set)
  • … 5 more in detail file

Collapse

Section titled “Collapse”

components/collapse.md · 2 sets · 0 standalone

Preview:

  • Collapse → a3698e91790e41a7f97076c83297acf5dc851c79 (set)
  • Simple content sample → 203abd2c885668d4e721d054e9fb3fe30d134e59 (set)

Skeleton

Section titled “Skeleton”

components/skeleton.md · 6 sets · 8 standalone

Preview:

  • Skeleton comps/content-blok → f4ef4b70d2d1a80b470d8b9c1b1aa1d97335d299
  • Skeleton comps/img → a214df57fd6ef4720a2f9904800ef8992fd727cc (set)
  • Skeleton comps/img-large → 597978fa88c5b3e22fafe16df3806860d43a9688
  • … 11 more in detail file
Section titled “Breadcrumb”

components/breadcrumb.md · 5 sets · 0 standalone

Preview:

  • .Breadcrumb Item master → 8d9ef0f0ef566f0cdc343f21a205fbbb994192b4 (set)
  • Breadcrumb Item → 840489f10658982e8117ad3af3a98808b76aefb9 (set)
  • Breadcrumb Item/Arrow → d01eda264b05ecb367e62c78332358b64ff682ea (set)
  • … 2 more in detail file

Rate

Section titled “Rate”

components/rate.md · 2 sets · 0 standalone

Preview:

  • Rate/Rate item → bdf6f36f54228288e5981fb5f6344b3071a31f1f (set)
  • Rate/Stars group → 9bff8f6e5841934fd75288d20642ff0e01b0a585 (set)
Section titled “Logo”

components/logo.md · 22 sets · 15 standalone

Preview:

  • Beta badge → 88292901c9130d47cb645a44a3df6cfb797207dc
  • DOL AI → 4acd45705b1ab7c2c7f9171afd8c6c93bec6c658
  • DOL AI Alpha → 3ad88c534df928f9de9cd8067d70f0ddec952489
  • … 34 more in detail file
Section titled “Program logo”

components/program-logo.md · 1 sets · 0 standalone

Preview:

  • Program logo → 8ae2822d66cf8d6605edb4f11356c9fc2afb5152 (set)

Scroller

Section titled “Scroller”

components/scroller.md · 6 sets · 0 standalone

Preview:

  • .Scroller/Base thumb → 1ab88e4beb77c8dc049407bd52214958466143ce (set)
  • .Scroller/Horizontal/Position → 9a9fe2d6f62dd70435a4f7e47fc67d76f1089a3c (set)
  • .Scroller/Position → cc196dfc4c00db39c1070a1850a2b7c6ff7ce54b (set)
  • … 3 more in detail file

Order number

Section titled “Order number”

components/order-number.md · 3 sets · 0 standalone

Preview:

  • .Element/Order number/Layout → 5f4a9ebf9a2ce185f0ebcca18337b75c784f05fa (set)
  • Element/Order number → 2ae1ba573695ec82db5f7dbeb727578590a5bf7a (set)
  • Element/Order number nhỏ xíu → 6194080b7012ef6d42068b19f901e2573ac9f78e (set)

Question (Câu hỏi, bài làm)

Section titled “Question (Câu hỏi, bài làm)”

components/question.md · 3 sets · 1 standalone

Preview:

  • .Master/Answer → 73d7de2e5fae3542f1902b124664ce8970715451 (set)
  • .Master/Question Number → 0e7d5f9ddc6867114dbee015bde1c8e085afe17b
  • Question item/Answer node (OLD) → cb4fd2ea3097d17be43b87320089fdcbc09ae019 (set)
  • … 1 more in detail file

Scores (Chấm điểm)

Section titled “Scores (Chấm điểm)”

components/scores.md · 2 sets · 0 standalone

Preview:

  • Element/Percent score circle → ecbe2e6864a17819c925fbaefaad5c63607c2612 (set)
  • Element/Score circle → 3afd1c3cd87441ae2cedecd6d3190e3efb41db28 (set)

LMS Role Sidebar

Section titled “LMS Role Sidebar”

components/lms-role-sidebar.md · 56 sets · 15 standalone

Preview:

  • Sidebar IELTS/Create syllabus/CD → 328a8a91347d7dbea21bce6d150112269864e949
  • Sidebar/Manage/Root admin → 30852e03a3015d43d528e047a31da59d637c8f3f
  • [L] Button/Sidebar collapes - Expand → a1a2290a9ca3bbdaf295d214b6bb1569bcab8c69 (set)
  • … 68 more in detail file

Mockup UI (Status bar, Indicator, Browser)

Section titled “Mockup UI (Status bar, Indicator, Browser)”

components/mockup-ui.md · 2 sets · 14 standalone

Preview:

  • Mockup UI element / Chrome / Access microphone → b1f563f8f50edbccfd863faa712a5c4373ca0f6b
  • Mockup UI element / Home Indicator → c3141e432460ce563e10d15a28aa5d72ff06b379
  • Mockup UI element / MacOS / Chrome Header — Dark → c40d28249998d1bfb5ff9bce0e36d8ae7ca36e84
  • … 13 more in detail file

Icons (1.5px stroke)

Section titled “Icons (1.5px stroke)”

components/icon-1-5.md · 0 sets · 979 standalone

Preview:

  • Icon 1.5//AI feature/Search add, plus → fe81a066463038009a9e3fadeaebaa750fbfd741
  • Icon 1.5//AI feature/Search practice → c4dea595cf58579ec6736893f000d78048312e95
  • Icon 1.5/AI feature/AI Book → b40fcf4f5de3e251eeca55319b01861fcab47309
  • … 976 more in detail file

Icons (filled style)

Section titled “Icons (filled style)”

components/icon-filled.md · 0 sets · 156 standalone

Preview:

  • Components/Icons/Course/Heart → 369b81adf3ce093d63c787b2f40982884854fcb8
  • Components/Icons/Course/info fill → a2be33fe96481d67d190b5d4d9eac754f0005068
  • Components/Icons/Course/minus fill → 91f2065b2e17469f18023f86e2295b5a3d4fa3a0
  • … 153 more in detail file

Emoji 3D

Section titled “Emoji 3D”

components/emoji-3d.md · 0 sets · 1275 standalone

Preview:

  • 3demoji/Activity/1st place medal → 1d15e8770110ffc5ace48046edddde686e59e2df
  • 3demoji/Activity/2nd place medal → d43b39d6eee1cbfbdfc80f6fbde7aafc8396bb05
  • 3demoji/Activity/3rd place medal → d70a4e3a88d3e27d47e2b16f5ad3d165245d2e90
  • … 1272 more in detail file
Section titled “Related”
  • tools/lookup.py - CLI for precise queries (component / variants / search / etc.)
  • variable-registry.md - variable resolved values + Tailwind mapping
  • variable-id-map.md - variable name ↔ Figma ID + collection IDs
  • variable-selection.md - intent → variable decision tree
  • workflows.md - 5 runbooks (bind / extract / mode-audit / DELETED-cleanup / instantiate)
  • naming-convention.md - 4-category semantic rule + anti-patterns
  • tools/resync-figma.md - re-extract metadata when DS changes