@coinbase/cds-mcp-server 8.62.1 → 8.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (315) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/mcp-docs/mobile/components/Accordion.txt +2 -0
  3. package/mcp-docs/mobile/components/AccordionItem.txt +2 -0
  4. package/mcp-docs/mobile/components/Alert.txt +2 -0
  5. package/mcp-docs/mobile/components/AreaChart.txt +3 -1
  6. package/mcp-docs/mobile/components/Avatar.txt +2 -0
  7. package/mcp-docs/mobile/components/AvatarButton.txt +2 -0
  8. package/mcp-docs/mobile/components/Banner.txt +3 -1
  9. package/mcp-docs/mobile/components/BarChart.txt +3 -1
  10. package/mcp-docs/mobile/components/Box.txt +2 -0
  11. package/mcp-docs/mobile/components/BrowserBar.txt +2 -0
  12. package/mcp-docs/mobile/components/Button.txt +4 -2
  13. package/mcp-docs/mobile/components/ButtonGroup.txt +2 -0
  14. package/mcp-docs/mobile/components/Calendar.txt +2 -0
  15. package/mcp-docs/mobile/components/Carousel.txt +2 -0
  16. package/mcp-docs/mobile/components/CartesianChart.txt +2 -0
  17. package/mcp-docs/mobile/components/CellMedia.txt +3 -1
  18. package/mcp-docs/mobile/components/Checkbox.txt +2 -0
  19. package/mcp-docs/mobile/components/CheckboxCell.txt +2 -0
  20. package/mcp-docs/mobile/components/CheckboxGroup.txt +2 -0
  21. package/mcp-docs/mobile/components/Chip.txt +2 -0
  22. package/mcp-docs/mobile/components/Coachmark.txt +2 -0
  23. package/mcp-docs/mobile/components/Collapsible.txt +2 -0
  24. package/mcp-docs/mobile/components/Combobox.txt +2 -0
  25. package/mcp-docs/mobile/components/ContainedAssetCard.txt +2 -0
  26. package/mcp-docs/mobile/components/ContentCard.txt +2 -0
  27. package/mcp-docs/mobile/components/ContentCardBody.txt +2 -0
  28. package/mcp-docs/mobile/components/ContentCardFooter.txt +2 -0
  29. package/mcp-docs/mobile/components/ContentCardHeader.txt +2 -0
  30. package/mcp-docs/mobile/components/ContentCell.txt +2 -0
  31. package/mcp-docs/mobile/components/ControlGroup.txt +2 -0
  32. package/mcp-docs/mobile/components/DataCard.txt +56 -0
  33. package/mcp-docs/mobile/components/DateInput.txt +2 -0
  34. package/mcp-docs/mobile/components/DatePicker.txt +2 -0
  35. package/mcp-docs/mobile/components/Divider.txt +2 -0
  36. package/mcp-docs/mobile/components/DotCount.txt +2 -0
  37. package/mcp-docs/mobile/components/DotStatusColor.txt +2 -0
  38. package/mcp-docs/mobile/components/DotSymbol.txt +3 -1
  39. package/mcp-docs/mobile/components/Fallback.txt +2 -0
  40. package/mcp-docs/mobile/components/FloatingAssetCard.txt +2 -0
  41. package/mcp-docs/mobile/components/HStack.txt +2 -0
  42. package/mcp-docs/mobile/components/HeroSquare.txt +3 -1
  43. package/mcp-docs/mobile/components/Icon.txt +3 -1
  44. package/mcp-docs/mobile/components/IconButton.txt +3 -1
  45. package/mcp-docs/mobile/components/InputChip.txt +2 -0
  46. package/mcp-docs/mobile/components/Interactable.txt +2 -0
  47. package/mcp-docs/mobile/components/Legend.txt +2 -0
  48. package/mcp-docs/mobile/components/LineChart.txt +3 -1
  49. package/mcp-docs/mobile/components/Link.txt +2 -0
  50. package/mcp-docs/mobile/components/ListCell.txt +2 -0
  51. package/mcp-docs/mobile/components/LogoMark.txt +2 -0
  52. package/mcp-docs/mobile/components/LogoWordMark.txt +2 -0
  53. package/mcp-docs/mobile/components/Lottie.txt +2 -0
  54. package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -0
  55. package/mcp-docs/mobile/components/MediaCard.txt +2 -0
  56. package/mcp-docs/mobile/components/MediaChip.txt +2 -0
  57. package/mcp-docs/mobile/components/MessagingCard.txt +2 -0
  58. package/mcp-docs/mobile/components/Modal.txt +2 -0
  59. package/mcp-docs/mobile/components/ModalBody.txt +2 -0
  60. package/mcp-docs/mobile/components/ModalFooter.txt +2 -0
  61. package/mcp-docs/mobile/components/ModalHeader.txt +3 -1
  62. package/mcp-docs/mobile/components/MultiContentModule.txt +2 -0
  63. package/mcp-docs/mobile/components/NavigationTitle.txt +2 -0
  64. package/mcp-docs/mobile/components/NavigationTitleSelect.txt +2 -0
  65. package/mcp-docs/mobile/components/NudgeCard.txt +2 -0
  66. package/mcp-docs/mobile/components/Numpad.txt +2 -0
  67. package/mcp-docs/mobile/components/Overlay.txt +2 -0
  68. package/mcp-docs/mobile/components/PageFooter.txt +2 -0
  69. package/mcp-docs/mobile/components/PageHeader.txt +2 -0
  70. package/mcp-docs/mobile/components/PercentageBarChart.txt +819 -0
  71. package/mcp-docs/mobile/components/PeriodSelector.txt +4 -2
  72. package/mcp-docs/mobile/components/Pictogram.txt +2 -0
  73. package/mcp-docs/mobile/components/Point.txt +2 -0
  74. package/mcp-docs/mobile/components/PortalProvider.txt +2 -0
  75. package/mcp-docs/mobile/components/Pressable.txt +2 -0
  76. package/mcp-docs/mobile/components/ProgressBar.txt +2 -0
  77. package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +2 -0
  78. package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +2 -0
  79. package/mcp-docs/mobile/components/ProgressCircle.txt +2 -0
  80. package/mcp-docs/mobile/components/Radio.txt +2 -0
  81. package/mcp-docs/mobile/components/RadioCell.txt +2 -0
  82. package/mcp-docs/mobile/components/RadioGroup.txt +2 -0
  83. package/mcp-docs/mobile/components/ReferenceLine.txt +2 -0
  84. package/mcp-docs/mobile/components/RemoteImage.txt +2 -0
  85. package/mcp-docs/mobile/components/RemoteImageGroup.txt +2 -0
  86. package/mcp-docs/mobile/components/RollingNumber.txt +2 -0
  87. package/mcp-docs/mobile/components/Scrubber.txt +2 -0
  88. package/mcp-docs/mobile/components/SearchInput.txt +2 -0
  89. package/mcp-docs/mobile/components/SectionHeader.txt +2 -0
  90. package/mcp-docs/mobile/components/SegmentedTabs.txt +4 -2
  91. package/mcp-docs/mobile/components/Select.txt +2 -0
  92. package/mcp-docs/mobile/components/SelectAlpha.txt +2 -0
  93. package/mcp-docs/mobile/components/SelectChip.txt +2 -0
  94. package/mcp-docs/mobile/components/SelectChipAlpha.txt +2 -0
  95. package/mcp-docs/mobile/components/SelectOption.txt +2 -0
  96. package/mcp-docs/mobile/components/SlideButton.txt +2 -0
  97. package/mcp-docs/mobile/components/Spacer.txt +2 -0
  98. package/mcp-docs/mobile/components/Sparkline.txt +2 -0
  99. package/mcp-docs/mobile/components/SparklineGradient.txt +2 -0
  100. package/mcp-docs/mobile/components/SparklineInteractive.txt +2 -0
  101. package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +2 -0
  102. package/mcp-docs/mobile/components/Spinner.txt +2 -0
  103. package/mcp-docs/mobile/components/SpotIcon.txt +2 -0
  104. package/mcp-docs/mobile/components/SpotRectangle.txt +2 -0
  105. package/mcp-docs/mobile/components/SpotSquare.txt +2 -0
  106. package/mcp-docs/mobile/components/Stepper.txt +2 -0
  107. package/mcp-docs/mobile/components/SubBrandLogoMark.txt +2 -0
  108. package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +2 -0
  109. package/mcp-docs/mobile/components/Switch.txt +2 -0
  110. package/mcp-docs/mobile/components/TabIndicator.txt +2 -0
  111. package/mcp-docs/mobile/components/TabLabel.txt +2 -0
  112. package/mcp-docs/mobile/components/TabNavigation.txt +2 -0
  113. package/mcp-docs/mobile/components/TabbedChips.txt +2 -0
  114. package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +2 -0
  115. package/mcp-docs/mobile/components/Tabs.txt +69 -107
  116. package/mcp-docs/mobile/components/Tag.txt +4 -2
  117. package/mcp-docs/mobile/components/Text.txt +2 -0
  118. package/mcp-docs/mobile/components/TextInput.txt +2 -0
  119. package/mcp-docs/mobile/components/ThemeProvider.txt +2 -0
  120. package/mcp-docs/mobile/components/Toast.txt +2 -0
  121. package/mcp-docs/mobile/components/Tooltip.txt +2 -0
  122. package/mcp-docs/mobile/components/TopNavBar.txt +2 -0
  123. package/mcp-docs/mobile/components/Tour.txt +13 -0
  124. package/mcp-docs/mobile/components/Tray.txt +2 -0
  125. package/mcp-docs/mobile/components/UpsellCard.txt +2 -0
  126. package/mcp-docs/mobile/components/VStack.txt +2 -0
  127. package/mcp-docs/mobile/components/XAxis.txt +2 -0
  128. package/mcp-docs/mobile/components/YAxis.txt +2 -0
  129. package/mcp-docs/mobile/getting-started/ai-overview.txt +2 -0
  130. package/mcp-docs/mobile/getting-started/colors.txt +66 -0
  131. package/mcp-docs/mobile/getting-started/installation.txt +2 -0
  132. package/mcp-docs/mobile/getting-started/introduction.txt +2 -0
  133. package/mcp-docs/mobile/getting-started/playground.txt +2 -0
  134. package/mcp-docs/mobile/getting-started/styling.txt +2 -0
  135. package/mcp-docs/mobile/getting-started/templates.txt +2 -0
  136. package/mcp-docs/mobile/getting-started/theming.txt +2 -0
  137. package/mcp-docs/mobile/guides/v8-migration-guide.txt +2 -0
  138. package/mcp-docs/mobile/hooks/useDimensions.txt +2 -0
  139. package/mcp-docs/mobile/hooks/useEventHandler.txt +2 -0
  140. package/mcp-docs/mobile/hooks/useMergeRefs.txt +2 -0
  141. package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +2 -0
  142. package/mcp-docs/mobile/hooks/usePreviousValue.txt +2 -0
  143. package/mcp-docs/mobile/hooks/useRefMap.txt +2 -0
  144. package/mcp-docs/mobile/hooks/useTheme.txt +2 -0
  145. package/mcp-docs/mobile/routes.txt +3 -1
  146. package/mcp-docs/web/components/Accordion.txt +2 -0
  147. package/mcp-docs/web/components/AccordionItem.txt +2 -0
  148. package/mcp-docs/web/components/Alert.txt +2 -0
  149. package/mcp-docs/web/components/AreaChart.txt +3 -1
  150. package/mcp-docs/web/components/Avatar.txt +2 -0
  151. package/mcp-docs/web/components/AvatarButton.txt +2 -0
  152. package/mcp-docs/web/components/Banner.txt +3 -1
  153. package/mcp-docs/web/components/BarChart.txt +3 -1
  154. package/mcp-docs/web/components/Box.txt +2 -0
  155. package/mcp-docs/web/components/Button.txt +4 -2
  156. package/mcp-docs/web/components/ButtonGroup.txt +2 -0
  157. package/mcp-docs/web/components/Calendar.txt +2 -0
  158. package/mcp-docs/web/components/Carousel.txt +2 -0
  159. package/mcp-docs/web/components/CartesianChart.txt +2 -0
  160. package/mcp-docs/web/components/CellMedia.txt +3 -1
  161. package/mcp-docs/web/components/Checkbox.txt +2 -0
  162. package/mcp-docs/web/components/CheckboxCell.txt +2 -0
  163. package/mcp-docs/web/components/CheckboxGroup.txt +2 -0
  164. package/mcp-docs/web/components/Chip.txt +2 -0
  165. package/mcp-docs/web/components/Coachmark.txt +2 -0
  166. package/mcp-docs/web/components/Collapsible.txt +2 -0
  167. package/mcp-docs/web/components/Combobox.txt +2 -0
  168. package/mcp-docs/web/components/ContainedAssetCard.txt +2 -0
  169. package/mcp-docs/web/components/ContentCard.txt +2 -0
  170. package/mcp-docs/web/components/ContentCardBody.txt +2 -0
  171. package/mcp-docs/web/components/ContentCardFooter.txt +2 -0
  172. package/mcp-docs/web/components/ContentCardHeader.txt +2 -0
  173. package/mcp-docs/web/components/ContentCell.txt +2 -0
  174. package/mcp-docs/web/components/ControlGroup.txt +2 -0
  175. package/mcp-docs/web/components/DataCard.txt +100 -0
  176. package/mcp-docs/web/components/DateInput.txt +2 -0
  177. package/mcp-docs/web/components/DatePicker.txt +2 -0
  178. package/mcp-docs/web/components/Divider.txt +2 -0
  179. package/mcp-docs/web/components/DotCount.txt +2 -0
  180. package/mcp-docs/web/components/DotStatusColor.txt +2 -0
  181. package/mcp-docs/web/components/DotSymbol.txt +3 -1
  182. package/mcp-docs/web/components/Dropdown.txt +2 -0
  183. package/mcp-docs/web/components/Fallback.txt +2 -0
  184. package/mcp-docs/web/components/FloatingAssetCard.txt +2 -0
  185. package/mcp-docs/web/components/FocusTrap.txt +2 -0
  186. package/mcp-docs/web/components/FullscreenAlert.txt +3 -1
  187. package/mcp-docs/web/components/FullscreenModal.txt +2 -0
  188. package/mcp-docs/web/components/FullscreenModalLayout.txt +2 -0
  189. package/mcp-docs/web/components/Grid.txt +2 -0
  190. package/mcp-docs/web/components/GridColumn.txt +2 -0
  191. package/mcp-docs/web/components/HStack.txt +2 -0
  192. package/mcp-docs/web/components/HeroSquare.txt +3 -1
  193. package/mcp-docs/web/components/Icon.txt +3 -1
  194. package/mcp-docs/web/components/IconButton.txt +3 -1
  195. package/mcp-docs/web/components/InputChip.txt +2 -0
  196. package/mcp-docs/web/components/Interactable.txt +2 -0
  197. package/mcp-docs/web/components/Legend.txt +2 -0
  198. package/mcp-docs/web/components/LineChart.txt +3 -1
  199. package/mcp-docs/web/components/Link.txt +2 -0
  200. package/mcp-docs/web/components/ListCell.txt +2 -0
  201. package/mcp-docs/web/components/LogoMark.txt +2 -0
  202. package/mcp-docs/web/components/LogoWordMark.txt +2 -0
  203. package/mcp-docs/web/components/Lottie.txt +2 -0
  204. package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -0
  205. package/mcp-docs/web/components/MediaCard.txt +2 -0
  206. package/mcp-docs/web/components/MediaChip.txt +2 -0
  207. package/mcp-docs/web/components/MediaQueryProvider.txt +2 -0
  208. package/mcp-docs/web/components/MessagingCard.txt +2 -0
  209. package/mcp-docs/web/components/Modal.txt +2 -0
  210. package/mcp-docs/web/components/ModalBody.txt +2 -0
  211. package/mcp-docs/web/components/ModalFooter.txt +2 -0
  212. package/mcp-docs/web/components/ModalHeader.txt +3 -1
  213. package/mcp-docs/web/components/MultiContentModule.txt +2 -0
  214. package/mcp-docs/web/components/NavigationBar.txt +2 -0
  215. package/mcp-docs/web/components/NavigationTitle.txt +2 -0
  216. package/mcp-docs/web/components/NavigationTitleSelect.txt +2 -0
  217. package/mcp-docs/web/components/NudgeCard.txt +2 -0
  218. package/mcp-docs/web/components/Overlay.txt +2 -0
  219. package/mcp-docs/web/components/PageFooter.txt +2 -0
  220. package/mcp-docs/web/components/PageHeader.txt +2 -0
  221. package/mcp-docs/web/components/Pagination.txt +2 -0
  222. package/mcp-docs/web/components/PercentageBarChart.txt +814 -0
  223. package/mcp-docs/web/components/PeriodSelector.txt +4 -2
  224. package/mcp-docs/web/components/Pictogram.txt +2 -0
  225. package/mcp-docs/web/components/Point.txt +2 -0
  226. package/mcp-docs/web/components/PopoverPanel.txt +283 -0
  227. package/mcp-docs/web/components/PortalProvider.txt +2 -0
  228. package/mcp-docs/web/components/Pressable.txt +2 -0
  229. package/mcp-docs/web/components/ProgressBar.txt +2 -0
  230. package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +2 -0
  231. package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +2 -0
  232. package/mcp-docs/web/components/ProgressCircle.txt +2 -0
  233. package/mcp-docs/web/components/Radio.txt +2 -0
  234. package/mcp-docs/web/components/RadioCell.txt +2 -0
  235. package/mcp-docs/web/components/RadioGroup.txt +2 -0
  236. package/mcp-docs/web/components/ReferenceLine.txt +2 -0
  237. package/mcp-docs/web/components/RemoteImage.txt +2 -0
  238. package/mcp-docs/web/components/RemoteImageGroup.txt +2 -0
  239. package/mcp-docs/web/components/RollingNumber.txt +2 -0
  240. package/mcp-docs/web/components/Scrubber.txt +2 -0
  241. package/mcp-docs/web/components/SearchInput.txt +2 -0
  242. package/mcp-docs/web/components/SectionHeader.txt +2 -0
  243. package/mcp-docs/web/components/SegmentedControl.txt +2 -0
  244. package/mcp-docs/web/components/SegmentedTabs.txt +4 -2
  245. package/mcp-docs/web/components/Select.txt +2 -0
  246. package/mcp-docs/web/components/SelectAlpha.txt +2 -0
  247. package/mcp-docs/web/components/SelectChip.txt +2 -0
  248. package/mcp-docs/web/components/SelectChipAlpha.txt +2 -0
  249. package/mcp-docs/web/components/SelectOption.txt +2 -0
  250. package/mcp-docs/web/components/Sidebar.txt +2 -0
  251. package/mcp-docs/web/components/SidebarItem.txt +3 -1
  252. package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -0
  253. package/mcp-docs/web/components/Spacer.txt +2 -0
  254. package/mcp-docs/web/components/Sparkline.txt +2 -0
  255. package/mcp-docs/web/components/SparklineGradient.txt +2 -0
  256. package/mcp-docs/web/components/SparklineInteractive.txt +2 -0
  257. package/mcp-docs/web/components/SparklineInteractiveHeader.txt +2 -0
  258. package/mcp-docs/web/components/Spinner.txt +2 -0
  259. package/mcp-docs/web/components/SpotIcon.txt +2 -0
  260. package/mcp-docs/web/components/SpotRectangle.txt +2 -0
  261. package/mcp-docs/web/components/SpotSquare.txt +2 -0
  262. package/mcp-docs/web/components/Stepper.txt +2 -0
  263. package/mcp-docs/web/components/SubBrandLogoMark.txt +2 -0
  264. package/mcp-docs/web/components/SubBrandLogoWordMark.txt +2 -0
  265. package/mcp-docs/web/components/Switch.txt +2 -0
  266. package/mcp-docs/web/components/TabIndicator.txt +2 -0
  267. package/mcp-docs/web/components/TabLabel.txt +2 -0
  268. package/mcp-docs/web/components/TabNavigation.txt +2 -0
  269. package/mcp-docs/web/components/TabbedChips.txt +2 -0
  270. package/mcp-docs/web/components/TabbedChipsAlpha.txt +2 -0
  271. package/mcp-docs/web/components/Table.txt +2 -0
  272. package/mcp-docs/web/components/TableBody.txt +2 -0
  273. package/mcp-docs/web/components/TableCaption.txt +2 -0
  274. package/mcp-docs/web/components/TableCell.txt +2 -0
  275. package/mcp-docs/web/components/TableCellFallback.txt +2 -0
  276. package/mcp-docs/web/components/TableFooter.txt +2 -0
  277. package/mcp-docs/web/components/TableHeader.txt +2 -0
  278. package/mcp-docs/web/components/TableRow.txt +2 -0
  279. package/mcp-docs/web/components/Tabs.txt +72 -104
  280. package/mcp-docs/web/components/Tag.txt +4 -2
  281. package/mcp-docs/web/components/Text.txt +2 -0
  282. package/mcp-docs/web/components/TextInput.txt +2 -0
  283. package/mcp-docs/web/components/ThemeProvider.txt +2 -0
  284. package/mcp-docs/web/components/TileButton.txt +2 -0
  285. package/mcp-docs/web/components/Toast.txt +2 -0
  286. package/mcp-docs/web/components/Tooltip.txt +2 -0
  287. package/mcp-docs/web/components/Tour.txt +14 -0
  288. package/mcp-docs/web/components/Tray.txt +2 -0
  289. package/mcp-docs/web/components/UpsellCard.txt +2 -0
  290. package/mcp-docs/web/components/VStack.txt +2 -0
  291. package/mcp-docs/web/components/XAxis.txt +2 -0
  292. package/mcp-docs/web/components/YAxis.txt +2 -0
  293. package/mcp-docs/web/getting-started/ai-overview.txt +2 -0
  294. package/mcp-docs/web/getting-started/colors.txt +66 -0
  295. package/mcp-docs/web/getting-started/installation.txt +3 -1
  296. package/mcp-docs/web/getting-started/introduction.txt +2 -0
  297. package/mcp-docs/web/getting-started/playground.txt +2 -0
  298. package/mcp-docs/web/getting-started/styling.txt +2 -0
  299. package/mcp-docs/web/getting-started/templates.txt +2 -0
  300. package/mcp-docs/web/getting-started/theming.txt +2 -0
  301. package/mcp-docs/web/guides/v8-migration-guide.txt +2 -0
  302. package/mcp-docs/web/hooks/useBreakpoints.txt +2 -0
  303. package/mcp-docs/web/hooks/useDimensions.txt +2 -0
  304. package/mcp-docs/web/hooks/useEventHandler.txt +2 -0
  305. package/mcp-docs/web/hooks/useHasMounted.txt +2 -0
  306. package/mcp-docs/web/hooks/useIsoEffect.txt +2 -0
  307. package/mcp-docs/web/hooks/useMediaQuery.txt +2 -0
  308. package/mcp-docs/web/hooks/useMergeRefs.txt +2 -0
  309. package/mcp-docs/web/hooks/useOverlayContentContext.txt +2 -0
  310. package/mcp-docs/web/hooks/usePreviousValue.txt +2 -0
  311. package/mcp-docs/web/hooks/useRefMap.txt +2 -0
  312. package/mcp-docs/web/hooks/useScrollBlocker.txt +2 -0
  313. package/mcp-docs/web/hooks/useTheme.txt +2 -0
  314. package/mcp-docs/web/routes.txt +4 -1
  315. package/package.json +1 -1
@@ -1,5 +1,7 @@
1
1
  # DataCard
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/cards/DataCard/
4
+
3
5
  A flexible card component for displaying data with visualizations like progress bars and circles. It supports horizontal and vertical layouts with customizable thumbnails and title accessories.
4
6
 
5
7
  ## Import
@@ -174,6 +176,104 @@ function Example() {
174
176
  }
175
177
  ```
176
178
 
179
+ ### With PercentageBarChart
180
+
181
+ `PercentageBarChart` can be passed directly as the `children` of a `DataCard` to visualize part-to-whole data alongside a title and subtitle.
182
+
183
+ ```jsx live
184
+ function Example() {
185
+ const [tick, setTick] = useState(0);
186
+
187
+ useEffect(() => {
188
+ const id = setInterval(() => setTick((t) => t + 4), 1000);
189
+ return () => clearInterval(id);
190
+ }, []);
191
+
192
+ const PredictionLegendEntry = memo(function PredictionLegendEntry({ seriesId, label, color }) {
193
+ const { series } = useCartesianChartContext();
194
+ const percentage = series.find((s) => s.id === seriesId)?.data?.[0] ?? 0;
195
+
196
+ return (
197
+ <Chip
198
+ compact
199
+ styles={{
200
+ root: {
201
+ borderColor: color,
202
+ borderWidth: 2,
203
+ background: `color-mix(in srgb, ${color} 12%, transparent)`,
204
+ },
205
+ }}
206
+ >
207
+ <HStack alignItems="center" gap={0.5} style={{ color }}>
208
+ <Text color="currentColor" font="label1">
209
+ {label}
210
+ </Text>
211
+ <Text color="currentColor" font="label1">
212
+ &middot;
213
+ </Text>
214
+ <RollingNumber
215
+ color="currentColor"
216
+ font="label1"
217
+ format={{ style: 'percent', maximumFractionDigits: 0 }}
218
+ value={percentage / 100}
219
+ />
220
+ </HStack>
221
+ </Chip>
222
+ );
223
+ });
224
+
225
+ const PredictionCard = useMemo(
226
+ () =>
227
+ memo(function PredictionCard({ question, subtitle, yesValue }) {
228
+ const noValue = 100 - yesValue;
229
+
230
+ return (
231
+ <DataCard layout="vertical" subtitle={subtitle} title={question}>
232
+ <Box paddingTop={2}>
233
+ <PercentageBarChart
234
+ barMinSize={8}
235
+ borderRadius={8}
236
+ height={56}
237
+ legend={<Legend EntryComponent={PredictionLegendEntry} paddingTop={2} />}
238
+ series={[
239
+ { id: 'yes', data: yesValue, label: 'Yes', color: 'var(--color-fgPositive)' },
240
+ { id: 'no', data: noValue, label: 'No', color: 'var(--color-fgNegative)' },
241
+ ]}
242
+ stackGap={4}
243
+ />
244
+ </Box>
245
+ </DataCard>
246
+ );
247
+ }),
248
+ [],
249
+ );
250
+
251
+ const btcYes = 50 + Math.sin(tick * 0.05) * 49;
252
+
253
+ return (
254
+ <VStack gap={2} width={480}>
255
+ <DataCard layout="vertical" subtitle="Top holdings" title="Portfolio Allocation">
256
+ <Box paddingTop={2}>
257
+ <PercentageBarChart
258
+ barMinSize={8}
259
+ borderRadius={8}
260
+ height={48}
261
+ legend={<Legend paddingTop={2} />}
262
+ series={[
263
+ { id: 'btc', data: 55, label: 'BTC', color: assets.btc.color },
264
+ { id: 'eth', data: 30, label: 'ETH', color: assets.eth.color },
265
+ { id: 'sushi', data: 15, label: 'SUSHI', color: assets.sushi.color },
266
+ ]}
267
+ stackGap={4}
268
+ />
269
+ </Box>
270
+ </DataCard>
271
+ <PredictionCard question="Will BTC reach $200k?" subtitle="Closes Dec 31" yesValue={btcYes} />
272
+ </VStack>
273
+ );
274
+ }
275
+ ```
276
+
177
277
  ### Layout Variations
178
278
 
179
279
  Use `layout="vertical"` for stacked layouts (thumbnail on left, visualization below) or `layout="horizontal"` for side-by-side layouts (header on left, visualization on right).
@@ -1,5 +1,7 @@
1
1
  # DateInput
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/other/DateInput/
4
+
3
5
  DateInput is a text input field for entering dates by typing. The input automatically formats dates based on the user's locale.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # DatePicker
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/other/DatePicker/
4
+
3
5
  Date Picker allows our global users to input past, present, future and important dates into our interface in a simple and intuitive manner. Date Picker offers both manual and calendar entry options - accommodating both internationalization and accessibility needs while being adaptable across screen platforms.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # Divider
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/layout/Divider/
4
+
3
5
  Separates content into sections.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # DotCount
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/other/DotCount/
4
+
3
5
  Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # DotStatusColor
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/other/DotStatusColor/
4
+
3
5
  Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # DotSymbol
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/other/DotSymbol/
4
+
3
5
  Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.
4
6
 
5
7
  ## Import
@@ -122,7 +124,7 @@ function UseDotSymbolPairedWithAnotherAsset() {
122
124
  | `className` | `string` | No | `-` | - |
123
125
  | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | The color of the icon |
124
126
  | `iconClassName` | `string` | No | `-` | - |
125
- | `iconName` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon name to add to the dot. |
127
+ | `iconName` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon name to add to the dot. |
126
128
  | `iconStyle` | `CSSProperties` | No | `-` | - |
127
129
  | `imageClassName` | `string` | No | `-` | - |
128
130
  | `imageStyle` | `CSSProperties` | No | `-` | - |
@@ -1,5 +1,7 @@
1
1
  # Dropdown
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/layout/Dropdown/
4
+
3
5
  An overlay that opens and closes.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # Fallback
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/feedback/Fallback/
4
+
3
5
  A component that displays a fallback animation.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # FloatingAssetCard
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/cards/FloatingAssetCard/
4
+
3
5
  A card component for displaying and managing asset holdings.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # FocusTrap
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/overlay/FocusTrap/
4
+
3
5
  FocusTrap is a component that traps focus within its children.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # FullscreenAlert
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/overlay/FullscreenAlert/
4
+
3
5
  A fullscreen alert component for displaying important messages that require user attention.
4
6
 
5
7
  ## Import
@@ -60,7 +62,7 @@ function DefaultAlert() {
60
62
  | `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
61
63
  | `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
62
64
  | `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
63
- | `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
65
+ | `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbmega \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
64
66
  | `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
65
67
  | `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
66
68
  | `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
@@ -1,5 +1,7 @@
1
1
  # FullscreenModal
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/overlay/FullscreenModal/
4
+
3
5
  FullscreenModal is a component that displays content in a full-screen overlay, typically used for immersive experiences or complex interactions.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # FullscreenModalLayout
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/overlay/FullscreenModalLayout/
4
+
3
5
  Provides the layout structure, overlay, focus trapping, and animations for fullscreen modals. Intended for internal use within Modal component variants.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # Grid
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/layout/Grid/
4
+
3
5
  A Box with extra props to make it easier to use the CSS grid API.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # GridColumn
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/layout/GridColumn/
4
+
3
5
  Place children of a Grid between specific grid lines.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # HStack
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/layout/HStack/
4
+
3
5
  A Box with flexDirection="row" set by default.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # HeroSquare
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/media/HeroSquare/
4
+
3
5
  Displays a square-shaped hero illustration.
4
6
 
5
7
  ## Import
@@ -38,7 +40,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
38
40
 
39
41
  | Prop | Type | Required | Default | Description |
40
42
  | --- | --- | --- | --- | --- |
41
- | `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
43
+ | `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbmega \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
42
44
  | `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
43
45
  | `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
44
46
  | `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
@@ -1,5 +1,7 @@
1
1
  # Icon
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/media/Icon/
4
+
3
5
  Displays icons from the icon font.
4
6
 
5
7
  ## Import
@@ -37,7 +39,7 @@ import { Icon } from '@coinbase/cds-web/icons/Icon'
37
39
 
38
40
  | Prop | Type | Required | Default | Description |
39
41
  | --- | --- | --- | --- | --- |
40
- | `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of the icon, as defined in Figma. |
42
+ | `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of the icon, as defined in Figma. |
41
43
  | `active` | `boolean` | No | `false` | Toggles the active and inactive state of the navigation icon |
42
44
  | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
43
45
  | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
@@ -1,5 +1,7 @@
1
1
  # IconButton
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/inputs/IconButton/
4
+
3
5
  A Button with an Icon for content.
4
6
 
5
7
  ## Import
@@ -309,7 +311,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
309
311
 
310
312
  | Prop | Type | Required | Default | Description |
311
313
  | --- | --- | --- | --- | --- |
312
- | `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of the icon, as defined in Figma. |
314
+ | `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of the icon, as defined in Figma. |
313
315
  | `about` | `string \| undefined` | No | `-` | - |
314
316
  | `accessKey` | `string \| undefined` | No | `-` | - |
315
317
  | `active` | `boolean` | No | `-` | Whether the icon is active |
@@ -1,5 +1,7 @@
1
1
  # InputChip
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/inputs/InputChip/
4
+
3
5
  A Chip used for removing selected values.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # Interactable
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/inputs/Interactable/
4
+
3
5
  A generic component for creating interactable elements. Provides dynamic styling for hovered, pressed, and disabled states.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # Legend
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/charts/Legend/
4
+
3
5
  A legend component for displaying series information in charts. Supports customizable shapes, layouts, and custom item components.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # LineChart
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/charts/LineChart/
4
+
3
5
  A flexible line chart component for displaying data trends over time. Supports multiple series, custom curves, areas, scrubbing, and interactive data exploration.
4
6
 
5
7
  ## Import
@@ -2062,7 +2064,7 @@ function ForecastAssetPrice() {
2062
2064
  | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
2063
2065
  | `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
2064
2066
  | `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition for updates. |
2065
- | `transitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'tween', duration: 0.5 }, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
2067
+ | `transitions` | `{ enter?: Transition$1 \| null; enterOpacity?: Transition$1 \| null \| undefined; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'tween', duration: 0.5 }, enterOpacity: undefined, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
2066
2068
  | `type` | `dotted \| solid` | No | `'solid'` | The type of line to render. |
2067
2069
  | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
2068
2070
  | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
@@ -1,5 +1,7 @@
1
1
  # Link
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/typography/Link/
4
+
3
5
  A pressable Text component.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # ListCell
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/data-display/ListCell/
4
+
3
5
  A versatile cell component used for displaying content in a list format, supporting various layouts and interactions.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # LogoMark
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/media/LogoMark/
4
+
3
5
  The Coinbase logo mark for branding.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # LogoWordMark
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/media/LogoWordMark/
4
+
3
5
  The full Coinbase logo with text for branding.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # Lottie
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/animation/Lottie/
4
+
3
5
  Renders After Effects animations as vectors.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # LottieStatusAnimation
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/animation/LottieStatusAnimation/
4
+
3
5
  A specialized component for displaying trade status animations.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # MediaCard
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/cards/MediaCard/
4
+
3
5
  MediaCard displays content with optional media in a contained card layout. Use it to showcase assets, products, or content with a thumbnail, title, subtitle, description, and optional media placement. MediaCard replaces the deprecated FloatingAssetCard and ContainedAssetCard components.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # MediaChip
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/inputs/MediaChip/
4
+
3
5
  A chip with spacing optimized for displaying circular asset media and CTA accessories. Automatically adjusts padding based on content configuration.
4
6
 
5
7
  ## Import
@@ -1,5 +1,7 @@
1
1
  # MediaQueryProvider
2
2
 
3
+ **📖 Live documentation:** https://cds.coinbase.com/components/other/MediaQueryProvider/
4
+
3
5
  Manages window.matchMedia subscriptions with SSR support.
4
6
 
5
7
  ## Import