Button
Source page in Figma: Button · 40 component sets · 1 standalone components
Index: ../component-registry.md · Workflows: ../workflows.md
Component Sets (40)
Section titled “Component Sets (40)”| Name | Key | Variants | Properties |
|---|---|---|---|
| .Button icon | 783b9c782d5b6dd44d920768ffa84c2d7f9ffe6a | 7 | 🔄 Swap icon#36048:0=instance-swap Property 1= Size (default Size)Property 2=7 opts (default xl)Property 3= Round - Legacy (default Round - Legacy) |
| .Button icon/Secondary/Size | 33eef6e4c376aa88e4863121357f25390f114360 | 22 | Swap icon#9525:0=instance-swap Size=11 opts (default 2xl)Shape= Square | Circle (default Square) |
| .Button icon/Touch/Size | c9b37ba2dfb4f72ac258a1d6085a51e258ff915a | 2 | Swap icon#9525:0=instance-swap Size= Xlarge | Large (default Xlarge)Shape= Square (default Square) |
| .Button/Content/Dropdown | 9e2e71c76828aad6778969c8d7eb8d58052c0c96 | 3 | ✏️ Btn text#8414:12=text State= Default | Loading | Active (default Default)Style= Icon | Loading (default Icon) |
| .Button/Content/General text inline (Quỷ tha ma bắt mày đi) | 9444a4ac43b0cf9cbd3b7ca8cd72005208c1ad64 | 5 | R icon#8414:0=bool (default True)Swap R icon#8414:3=instance-swap L icon#8414:6=bool (default True)Swap L icon#8414:9=instance-swap ✏️ Btn text#8414:12=text R badge#8557:0=bool (default True)L badge#8557:4=bool (default True)Text#10565:0=bool (default True)State= Default | Loading (default Default)Style= Icon + text | Loading | Badge | Text only | Badge Right (default Icon + text) |
| .Text link/Content/General text | 8c2968f87817ad2314a50a40653d290709074116 | 18 | Swap R icon#8554:4=instance-swap R icon#8554:5=bool (default True)Swap L icon#8554:6=instance-swap L icon#8554:7=bool (default True)Action Text#8554:8=text Font size= 14px | 12px | 16px (default 16px)Underline= False | True (default False)Font weight= Medium | Regular | Semibold (default Regular) |
| .Text link/Layout | a0800dd215e1e6c93db8c32fa94f6aa8cb08f664 | 16 | L icon#23618:0=bool (default True)🔄 L icon#23618:9=instance-swap R icon#23618:18=bool (default True)🔄 R icon#23618:27=instance-swap Underline#23618:36=bool (default True)✏️ Label#24659:0=text Size= Large | Medium | Small | Extra large | SubMedium (default Large)Layout= Legacy | Update (default Update)Font weight= Regular | Medium | Semibold (default Regular) |
| Button element/tooltip container | 518d4cdee5c1fb033616516c3d468d9c22eeccb3 | 4 | Position=Top | Right | Bot | Left (default Top) |
| Button group/Floating horizontal button icon | f935a98f451f504559f26cba5d707d1f9f2b0a8d | 8 | Number=2 | 3 (default 2)Style= Rounded | Block (default Rounded)Size= Xlarge | Large (default Xlarge) |
| Button group/Floating vertical button icon | ec3c4c80942417afa7c195ff0d10f4bc73a81c1f | 8 | Number=2 | 3 (default 2)Style= Rounded | Block (default Rounded)Size= Xlarge | Large (default Xlarge) |
| Button icon secondary/Element tooltip container | 9e05c97cf48f1e248923fc3e74b869b3eb1b9794 | 4 | Position=Top | Right | Bot | Left (default Top) |
| Button icon/Block button icon | 9881d3a8950eddafe78fc7fd21c0b11d372e6ae6 | 192 | Type=Primary | Secondary | Tertiary | Secondary - Filled (default Primary)Color style= Filled | Outline | Filled matte (default Filled)State= Default | Hover | Pressed | Disable (default Default)Background use= Primary | Dim | Neutral dark | Overlay (default Primary)Transparent= False | True (default False) |
| Button icon/Block-Blur | f2249b063edf93731ffe1362747445a777647bb8 | 8 | State=Default | Hover | Pressed | Disable (default Default)Background use= Primary (default Primary)Transparent= False | True (default False) |
| Button icon/Block-Grammar branch button icon | c3dc784d752fbef12e70b5e916996165906b5ab9 | 28 | Color style=Filled | Outline | Filled - Matte (default Filled)State= Default | Hover | Pressed | Disable (default Default)Background use= Primary | Dim | Neutral dark (default Primary)Property 8= Bold | Matte (default Bold) |
| Button icon/Block-Gray button icon | 6643a625adf8520dc77d68148b80970e3a32aeef | 24 | State=Default | Hover | Pressed | Disable (default Default)Background use= Primary | Dim (default Primary)Transparent= False | True (default False)Color style= Outline | Filled (default Filled) |
| Button icon/Block-NeutralInverse button icon | ca234a4b37ac433cc4f49a74a77398c3a91e1e25 | 16 | State=Default | Hover | Pressed | Disable (default Default)Background use= Dim | Primary (default Primary)Transparent= False | True (default False) |
| Button icon/Block-Status button icon | 3b7b05dbbe3805db1be02a00f5b4319ae52af4e3 | 144 | Color=Success | Warning | Danger (default Success)Filled style= Matte | Bold (default Bold)State= Default | Hover | Pressed | Disable (default Default)Color style= Filled | Outline (default Filled)Background use= Dim | Primary (default Primary)Transparent= False | True (default False) |
| Button icon/Round button icon | 231886d6f4a80e604eca119e927466e800289922 | 184 | Type=Primary | Secondary | Tertiary (default Primary)Color style= Filled | Filled matte | Outline (default Filled)State= Default | Hover | Pressed | Disable (default Default)Background use= Main white | Dim grey | Neutral dark (default Main white)Transparent= False | True (default False) |
| Button icon/Round-Grammar branch button icon | eadbbc5751311dba7d95edf99327c5709ec0af5c | 28 | Color style=Filled | Outline | Filled - Matte (default Filled)State= Default | Hover | Pressed | Disable (default Default)Background use= Primary | Dim | Neutral dark (default Primary)Property 8= Bold | Matte (default Bold) |
| Button icon/Round-NeutralInverse button icon | 63fb4ba7c4e3945e38ecf2addbf4a27947bc3f91 | 24 | State=Default | Hover | Pressed | Disable (default Default)Background use= Primary | Dim | Neutral dark (default Primary)Transparent= False | True (default False) |
| Button icon/Round-Status button icon | b4a93f2353107e096afe6ed5b4c4b9f5adb173cf | 144 | Color=Success | Warning | Danger (default Success)Filled style= Filled | Outline (default Filled)State= Default | Hover | Pressed | Disable (default Default)Color style= Matte | Bold (default Bold)Background use= Primary | Dim (default Dim)Transparent= False | True (default False) |
| Button icon/Secondary button icon | 2bda44e316a8ede7d458d5cae866c29d61a92e98 | 180 | Tooltip#21739:0=bool (default False)Color=16 opts (default Neutral 1)Color style= Default | Bold (default Default)State= Default | Hover | Pressed | Disable | Active (default Default)Transparent= False | True (default False) |
| Button icon/Size | 0f63dcdb1dc4d68f768e3c9b0fe9c5cf4d0a3b12 | 18 | 🔄 Swap icon#24872:24=instance-swap Size=9 opts (default 3xl)Type= Round | Block (default Round) |
| Button icon/Touch button for mobile | 957913b41aa90669e31905b10cc47f75bacafbe7 | 12 | State=Default | Disable (default Default)Color= Neutral | Blue | NeutralSecondary (default Neutral)Transparent= False | True (default False) |
| Button split | 4657e94d695fcd5d59bf812a47ceb9b300edd82a | 4 | Type=Primary | Secondary | Tertiary | Ghost (default Primary) |
| Button/AI button | 72c44765c50e134a6830fb77239e6d38cfd407cc | 120 | ✏️ Tooltip text#20061:0=text Tooltip#20064:31=bool (default True)Filled style= Filled | Outline | Matte (default Filled)Background use= Primary | Dim (default Primary)State= Default | Hover | Pressed | Loading | Disabled (default Default)Layout= Button text | Icon only (default Button text)Fix case= Đang dùng nhiều - Comp content | Bỏ comp Content trong Size (default Bỏ comp Content trong Size) |
| Button/Floating-block button icon | fad94064e95a4b36b37f66461a77d112d54f24cf | 24 | Color=Neutral | NeutralInverse | AI (default Neutral)State= Default | Hover | Hover tooltip | Pressed | Disable | Disable hover (default Default)Fill mode= Outline | Filled (default Outline) |
| Button/Floating-block button icon | e5d3c21a1910263d75952c4d122f958c92aaa1dd | 16 | Color=Neutral | NeutralInverse | AI (default Neutral)State= Default | Hover | Pressed | Disable (default Default)Fill mode= Outline | Filled (default Outline) |
| Button/Floating-rounded button icon | b86361dbefa5a195b0192cc5cf3b7a15399a9738 | 8 | Color=Neutral | NeutralInverse (default Neutral)State= Default | Hover | Pressed | Disable (default Default) |
| Button/General button | 97fe75b84fa5fdf92628cee95d1f38cc83850553 | 340 | Color=Primary | Secondary | Secondary - Filled | Tertiary (default Primary)Background use= Primary | Dim | Neutral dark (default Primary)Filled style= Filled | Outline | Filled matte | Filled white (default Filled)State= Default | Hover | Pressed | Loading | Disabled (default Default)Transparent= True | False (default False)Fix case= Bỏ comp Content trong Size | Đang dùng nhiều - Comp content (default Bỏ comp Content trong Size) |
| Button/NeutralInverse button | 96d8efce34b3062ef266684b267784e02b6b4e4d | 20 | State=Default | Disabled | Hover | Loading | Pressed (default Default)Transparent= False | True (default False)Fix case= Đang dùng nhiều - Comp content | Bỏ comp Content trong Size (default Bỏ comp Content trong Size) |
| Button/Paper | 86993dd21a5d2c20e7c3e6eb5f1315334ba1b73c | 60 | Color=Paper Secondary | Paper Primary (default Paper Primary)Filled style= Filled | Outline (default Filled)State= Default | Disabled | Hover | Loading | Pressed (default Default)Color style= Bold | Matte (default Bold)Transparent= False | True (default False)Fix case= Đang dùng nhiều - Comp content | Bỏ comp Content trong Size (default Bỏ comp Content trong Size) |
| Button/Promax button | 6198a3cc230aa0ce1e1b64ae551e916a56a96724 | 120 | Tooltip#20064:31=bool (default True)Effect#34498:25=bool (default True)Filled style= Filled | Outline | Matte (default Filled)Background use= Primary | Dim (default Primary)State= Default | Hover | Pressed | Loading | Disabled (default Default)Layout= Button text | Icon only (default Button text)Pro/Max= yes | no (default yes) |
| Button/Size | 1efba9e64e29300311911e834476af4840af76e8 | 64 | 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 Content tyle= Component | Text + icon (default Text + icon)Size=8 opts (default 3xl)Ver-Padding= True | False (default True)Icon only= False | True (default False)Text only= False | True (default False) |
| Button/Social button | c68853beaf6432c5ecfa613cc31f4b3337e5e420 | 30 | Social=Facebook | Google | Apply (default Google)Filled style= Outline | Filled (default Outline)State= Default | Hover | Pressed | Loading | Disabled (default Default)Transparent= False (default False)Fix case= Bỏ comp Content trong Size (default Bỏ comp Content trong Size) |
| Button/Status button | f3f7127a4969d7671304c8f943a0c7072bd92fcc | 480 | Color=Success | Warning | Danger (default Success)Background use= Primary | Dim (default Primary)Filled style= Filled | Outline (default Filled)State= Default | Disabled | Hover | Loading | Pressed (default Default)Color style= Bold | Matte (default Bold)Transparent= False | True (default False)Fix case= Đang dùng nhiều - Comp content | Bỏ comp Content trong Size (default Bỏ comp Content trong Size) |
| Floating button w text | a2a4286d44476a59ce3cf4523ea87714640ea654 | 1 | Style=Default (default Default) |
| Navigation/Paging arrow | c8806805ed517c83543bfacd87f86e39a6ae0e61 | 2 | Site=Medium | Small (default Medium) |
| Text link, text button | f1e27ff015500932752a7e35ee5f578b930e3f58 | 36 | State=Default | Hover | Focus | Disable (default Default)Color=9 opts (default Neutral) |
| Theme change button icon | 678b4c92803115100980f63d804f717b5ecfd831 | 6 | Theme=Dark | Light (default Dark)Style= Transparent | Outline block | Outline round (default Transparent) |
Standalone Components (1)
Section titled “Standalone Components (1)”| Name | Key |
|---|---|
| Guideline/Button | d0d6077c7350000e8474f69ae87a47cdc16d72cc |