Modal
Source page in Figma: Modal · 18 component sets · 18 standalone components
Index: ../component-registry.md · Workflows: ../workflows.md
Component Sets (18)
Section titled “Component Sets (18)”| Name | Key | Variants | Properties |
|---|---|---|---|
| Demonstrate/Table select modal/Reorder by drag and drop | 6ec6e8dd1b0a43c3b587c2e0abb2dc001156e298 | 3 | Step=1 | 2 | 3 (default 1) |
| Demonstrate/Table select modal/Select single item | 11c1931e10fc7acd651d2cb771b128e2110793c2 | 3 | Step=Default | Select | Select another (default Default) |
| Filter/Item/Select all, Remove all | 0c1bd84dca7d55ea4864fff3f9ca9462ef195fe9 | 3 | Layout=Select all + Remove all | Select all | Remove all (default Select all + Remove all) |
| Item/Button modal | 3b250d8161f49fc30fa09b5ad601ae5ff9b87ef9 | 36 | Type=❌ Close | ⬅️ Back (default ❌ Close)Size= md | sm | lg (default lg)State= Default | Hover (default Default)Decoy (0 Opacity)= False | True (default False)Style= Transparent | Outline (default Transparent) |
| Listing/Table/Listing Select/Sample/Multi item | 65fc31cdb8571f2aec6731c48af2dc21cb145657 | 3 | State=Default | Select | Selected (default Default) |
| Listing/Table/Listing Select/Sample/Single item | 538a9d44ff1c2b5b8cf087b4fc7916c9b333961d | 2 | State=Default | Selected (default Default) |
| Modal body content/Simple text | 96e23d6fa5fc442f08795bb559753fd8dc0347d4 | 2 | Align=Center | Left (default Center) |
| Modal footer | 602986d69f5660254baeb07d2f585c25be483c00 | 10 | Swap content#7887:14=instance-swap Modal footer#35380:232=SLOT Divider= True | False (default False)Blank= False | True (default False)Breakpoint= Default | <768 (default Default)Style= Newest | Legacy (default Newest) |
| Modal footer content/Add-on only | 42784f1ba1d148cf865517020f96856187ca33da | 1 | Show subtext#7566:18=bool (default True)Subtext= True (default True)Pagination= True (default True) |
| Modal footer content/Button + add-on | 842b1a256181cf179a9a7d58d0503afa6380f40c | 2 | Show subtext#7566:18=bool (default True)Add-on#21079:0=bool (default True)Type= General | Pagination (default General) |
| Modal footer content/Button group | ae1b7a1f85ac7d00ca22fe716d11dfc88a02faea | 3 | Swap content#7887:14=instance-swap Align= Center | Right | Left (default Center) |
| Modal footer content/Button groups | f514caec9f146b87c66426924d338e4d292d7b40 | 12 | Show 2nd btn#8554:19=bool (default True)Show 3rd btn#8554:26=bool (default True)Button number= 1 | 2 | 3 (default 1)Fill width= False | True (default False)Style= Newest | Legacy (default Newest) |
| Modal footer content/Steps | a1fe6e901b4034b772415ec6bd578b44e696b661 | 3 | State=Start | Middle | End (default Start) |
| Modal header | ce1e7dc5184eeaf49f3eaaf4e2cacad9c2162b48 | 6 | Close button#9484:13=bool (default True)Modal header#35380:243=SLOT Divider= False | True (default True)Breakpoint= Default | <768 (default Default)Layout= Normal | No title (default Normal) |
| Modal header content/General text, icon | 0fa35337c7b8be9d06e043c973a67da5c61ff40e | 4 | 👁️ Subtext#7566:0=bool (default False)✏️ Subtext#7566:3=text ✏️ Header text#7566:6=text 🔄 R icon#11375:12=instance-swap 🔄 L icon#11375:13=instance-swap 👁️ L icon#11375:14=bool (default True)👁️ R icon#11375:15=bool (default False)Align= Center | Left (default Center)Enable icon= False | True (default False) |
| Modal/Select/Assignment/Layout/Multi pick | 2c6396220fcf698c56738a365ffd1ebd9fceac98 | 3 | Swap filter#8842:4=instance-swap Swap listing#8861:0=instance-swap Scroller#9334:0=bool (default True)State= Default | Selected (default Default)Tab= All | Selected (default All) |
| Modal/Select/Assignment/Layout/Single pick | c9d4165b739c1efd8652652c7cd1fedaad7fd535 | 3 | Swap filter#8842:4=instance-swap Swap listing#8861:4=instance-swap Scroller#9336:0=bool (default True)State= Default - all | Selected | Mở lại (default Default - all) |
| Table/Table cell/Select content | 96054f716b298b94dc37f592e6140aed27a9af51 | 8 | Layout=Select only | Action button (default Action button)Selected= False | True (default False)Type= Button | Text (default Button) |
Standalone Components (18)
Section titled “Standalone Components (18)”| Name | Key |
|---|---|
| Bottom sheet template/Info | ac74c4196f906ec24fde36bb93cc6a7c04c1a8e4 |
| Bottom sheet template/Select | 774c66ba8edeb3f71dea533474737590252cd942 |
| Bottom sheet/Dropdown w title | 4e4076c6f96398d6b604badc092c5c92121c4109 |
| Bottom sheet/Simple w info | 06d87b6d8a605c14a4841d2d0af0a38e2e96e10b |
| Bottom sheet/Simple w info v2 | cfc41ea8fc7014a6e0bea489d5ee30d6a121a960 |
| Demonstrate/Table/Reorder by drag and drop/Row item | 8d356f53c1ea88e0a5edaa0fbcee39e3b47c2084 |
| Modal body | 95d70febea5a06ce5cb0310f7021032161db9b54 |
| Modal content/Illustration | 54eaffe9e29a49d94e0b6b7072c548de7785593b |
| Modal header content/Assignemnt title | 8df07bf043eb6dcda9ed658105d0fe0d3cff45a2 |
| Modal header content/Child page | 152966edcb32b7b1270c32234c1c50be656040e3 |
| Modal header content/General inline | 7d5e31aec66c934d3e765ef4eccc0e5342bb3cac |
| Modal header content/Text + icon + sub inline (OLD) | 71024cd2d92956f1cbe035cff81457d636bea8bf |
| Modal/Full screen | 15fad3f47325093b863b9767b0a6744eec13172f |
| Modal/Large | c27bb3f132b696055c9582bffb452f0a351db069 |
| Modal/Medium | f7f40bc90ddd0b1f97c056188651170e0502d0f1 |
| Modal/Simple | 230d15aa632dcbd81440b20cdfc96287de3c4a18 |
| Modal/Simple w illustration | a02fc4804ad90037ae9c487fa0a01d6a0db2f66f |
| Modal/XLarge | 90c35f0ab2e707312e13cd0775e6a2082cb77b96 |