Tabbar, Toggle
Source page in Figma: Tabbar, Toggle · 16 component sets · 0 standalone components
Index: ../component-registry.md · Workflows: ../workflows.md
Component Sets (16)
Section titled “Component Sets (16)”| Name | Key | Variants | Properties |
|---|---|---|---|
| .Tabbar/Item/Tab button item line style | 7749cc1b98c97ddae0bded36140eab4c33352680 | 30 | Badge#11411:0=bool (default True)Current= True | False (default False)State= Default | Hover (default Default)Align= Left | Center (default Left)Size= 28px | 32px | 40px | 48px | 52px (default 28px) |
| .Tag item/Size | c348fd08b4f5bc0fb02f5f5532abca3ebc053b14 | 24 | L icon#28354:0=bool (default True)🔄 L icon#28354:49=instance-swap R icon#28354:98=bool (default True)🔄 R icon#28354:147=instance-swap ✏️ Label#28354:196=text Badge#33445:0=bool (default True)Content tyle= Text + icon (default Text + icon)Size= xl | lg | md | sm | xs | 2xs (default xl)Ver-Padding= True (default True)Icon only= False | True (default False)Text only= False (default False)Radius= Block | Rounded (default Block) |
| Button icon secondary/Element tooltip container | d1fdedfbede8c17b0ecad4ac5e3029a55def84ca | 4 | Position=Top | Right | Bot | Left (default Top) |
| Tabbar/Block tab button | 285dcf2c7c55d7aed29befb417e9f69ab3fbaf99 | 168 | State=Default | Disable | Hover | Active (default Default)Active= False | True (default False)Type=7 opts (default Secondary)Background use= Primary | Dim | Dark (default Primary)Transparent= no | yes (default no) |
| Tabbar/Group/Line style | 3e261014abac6a8c8e10dbe5d9c9085a56332539 | 5 | Number of tab=4 | 5 | 6 | 3 | 2 (default 3) |
| Tabbar/Item/Tab footer item | a932df575f40e7a97664d97551c0b2b6c0f242b2 | 6 | Active=False | True (default False)State= Default | Hover | Active (default Default)Size= 1px | 2px (default 1px) |
| Tabbar/Sub tab button item line style | e4e6cb627c129ffd7e5f6360df881b5bf684a68e | 30 | Badge#11411:0=bool (default True)✏️ Tab#15346:0=text 👁️ L icon#15346:31=bool (default True)🔄 L icon#15346:62=instance-swap Active= True | False (default False)State= Default | Hover | Active (default Default)Align= Left | Center (default Left)Size= xs | sm | md | lg | xl (default xs) |
| Tabbar/Tab button item line style | e1a951dd8eb91368e0b2af637355f676c1cd6162 | 40 | Badge#11411:0=bool (default True)✏️ Tab#15346:0=text 👁️ L icon#15346:31=bool (default True)🔄 L icon#15346:62=instance-swap Active= True | False (default False)State= Default | Hover | Active (default Default)Align= Left | Center (default Left)Size= xs | sm | md | lg | xl (default xs)Active color= Unactive | Blue | Brand (default Unactive) |
| Toggle group responsive | d4332389c9784f16ab1f5936be4192da6c2128f3 | 2 | 🔄 Dropdown#32338:0=instance-swap State= Default | Dropdown (default Default) |
| Toggle group/icon style 2 | a369f786282535d693f6a968aed08990e0768887 | 12 | Item=2 | 3 | 4 (default 2)Size= Md | lg (default Md)Pill radius= no | yes (default no) |
| Toggle group/style 1 | cf770c965b94e929e2a8dcc69eefb4f0a9d585c0 | 9 | Item=2 | 3 | 4 (default 2)Size= Md | Sm | Xs (default Md) |
| Toggle group/style 2 | 43c4414153ea5633a71b17cd61182fa80d7acae2 | 9 | Item=2 | 3 | 4 (default 2)Size= Md | Sm | Xs (default Md) |
| Toggle group/style 3 | 6c0df1cacf0ebd9d344a898b579d15f8d12469f5 | 9 | Item=2 | 3 | 4 (default 2)Size= Md | Sm | Xs (default Md) |
| Toggle/Toggle button size | c4a85c1591b606b090a90451f81cf1a4d1da8006 | 20 | Icon#2950:0=bool (default True)🔄 Icon#5699:0=instance-swap Badge#32711:0=bool (default False)State= Default (default Default)Layout= Default (default Default)Size= sx | 2xs | lg | sm | Md (default lg)Shape= Block | Rounded (default Block)Icon only= no | yes (default no) |
| Toggle/Toggle button w status | 1bc96cd4da09d73c317906d070e263a4bf3b950f | 21 | Text#425:0=text Icon #1126:5=instance-swap icon#31900:0=bool (default True)Show dot #32481:0=bool (default False)Active= no | yes (default no)Active brand= no | yes (default no)Style= w status | Simple w icon | w tag (default w status)State= Default | Hover (default Default)Size= Default | Small (default Default) |
| Toggle/Toggle tab button | f605777ecb396d43d4e33db347c51d191f953b26 | 348 | State=Hover | Active | Tooltip | Default | Disabled (default Default)Type=7 opts (default Neutral)Color style= Matte | Bold (default Matte)Fill style= Transparent | Outline (default Transparent)Active= No | Yes (default No)Tooltip= no | yes (default no)Icon only= yes | no (default no)Pill radius= no | yes (default no) |