@coinbase/cds-mcp-server 8.62.1 → 8.66.1
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.
- package/CHANGELOG.md +40 -0
- package/mcp-docs/mobile/components/Accordion.txt +2 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +2 -0
- package/mcp-docs/mobile/components/Alert.txt +2 -0
- package/mcp-docs/mobile/components/AreaChart.txt +92 -250
- package/mcp-docs/mobile/components/Avatar.txt +2 -0
- package/mcp-docs/mobile/components/AvatarButton.txt +2 -0
- package/mcp-docs/mobile/components/Banner.txt +3 -1
- package/mcp-docs/mobile/components/BarChart.txt +5 -1
- package/mcp-docs/mobile/components/Box.txt +2 -0
- package/mcp-docs/mobile/components/BrowserBar.txt +2 -0
- package/mcp-docs/mobile/components/Button.txt +4 -2
- package/mcp-docs/mobile/components/ButtonGroup.txt +2 -0
- package/mcp-docs/mobile/components/Calendar.txt +2 -0
- package/mcp-docs/mobile/components/Carousel.txt +2 -0
- package/mcp-docs/mobile/components/CartesianChart.txt +22 -7
- package/mcp-docs/mobile/components/CellMedia.txt +3 -1
- package/mcp-docs/mobile/components/Checkbox.txt +2 -0
- package/mcp-docs/mobile/components/CheckboxCell.txt +2 -0
- package/mcp-docs/mobile/components/CheckboxGroup.txt +2 -0
- package/mcp-docs/mobile/components/Chip.txt +2 -0
- package/mcp-docs/mobile/components/Coachmark.txt +2 -0
- package/mcp-docs/mobile/components/Collapsible.txt +2 -0
- package/mcp-docs/mobile/components/Combobox.txt +2 -0
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +2 -0
- package/mcp-docs/mobile/components/ContentCard.txt +2 -0
- package/mcp-docs/mobile/components/ContentCardBody.txt +2 -0
- package/mcp-docs/mobile/components/ContentCardFooter.txt +2 -0
- package/mcp-docs/mobile/components/ContentCardHeader.txt +2 -0
- package/mcp-docs/mobile/components/ContentCell.txt +2 -0
- package/mcp-docs/mobile/components/ControlGroup.txt +2 -0
- package/mcp-docs/mobile/components/DataCard.txt +56 -0
- package/mcp-docs/mobile/components/DateInput.txt +2 -0
- package/mcp-docs/mobile/components/DatePicker.txt +2 -0
- package/mcp-docs/mobile/components/Divider.txt +2 -0
- package/mcp-docs/mobile/components/DotCount.txt +2 -0
- package/mcp-docs/mobile/components/DotStatusColor.txt +2 -0
- package/mcp-docs/mobile/components/DotSymbol.txt +3 -1
- package/mcp-docs/mobile/components/Fallback.txt +2 -0
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +2 -0
- package/mcp-docs/mobile/components/HStack.txt +2 -0
- package/mcp-docs/mobile/components/HeroSquare.txt +3 -1
- package/mcp-docs/mobile/components/Icon.txt +3 -1
- package/mcp-docs/mobile/components/IconButton.txt +3 -1
- package/mcp-docs/mobile/components/InputChip.txt +2 -0
- package/mcp-docs/mobile/components/Interactable.txt +2 -0
- package/mcp-docs/mobile/components/Legend.txt +2 -0
- package/mcp-docs/mobile/components/LineChart.txt +3 -1
- package/mcp-docs/mobile/components/Link.txt +2 -0
- package/mcp-docs/mobile/components/ListCell.txt +2 -0
- package/mcp-docs/mobile/components/LogoMark.txt +2 -0
- package/mcp-docs/mobile/components/LogoWordMark.txt +2 -0
- package/mcp-docs/mobile/components/Lottie.txt +2 -0
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -0
- package/mcp-docs/mobile/components/MediaCard.txt +2 -0
- package/mcp-docs/mobile/components/MediaChip.txt +2 -0
- package/mcp-docs/mobile/components/MessagingCard.txt +2 -0
- package/mcp-docs/mobile/components/Modal.txt +2 -0
- package/mcp-docs/mobile/components/ModalBody.txt +2 -0
- package/mcp-docs/mobile/components/ModalFooter.txt +2 -0
- package/mcp-docs/mobile/components/ModalHeader.txt +3 -1
- package/mcp-docs/mobile/components/MultiContentModule.txt +2 -0
- package/mcp-docs/mobile/components/NavigationTitle.txt +2 -0
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +2 -0
- package/mcp-docs/mobile/components/NudgeCard.txt +2 -0
- package/mcp-docs/mobile/components/Numpad.txt +2 -0
- package/mcp-docs/mobile/components/Overlay.txt +2 -0
- package/mcp-docs/mobile/components/PageFooter.txt +2 -0
- package/mcp-docs/mobile/components/PageHeader.txt +2 -0
- package/mcp-docs/mobile/components/PercentageBarChart.txt +819 -0
- package/mcp-docs/mobile/components/PeriodSelector.txt +4 -2
- package/mcp-docs/mobile/components/Pictogram.txt +2 -0
- package/mcp-docs/mobile/components/Point.txt +2 -0
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -0
- package/mcp-docs/mobile/components/Pressable.txt +2 -0
- package/mcp-docs/mobile/components/ProgressBar.txt +2 -0
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +2 -0
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +2 -0
- package/mcp-docs/mobile/components/ProgressCircle.txt +2 -0
- package/mcp-docs/mobile/components/Radio.txt +2 -0
- package/mcp-docs/mobile/components/RadioCell.txt +2 -0
- package/mcp-docs/mobile/components/RadioGroup.txt +2 -0
- package/mcp-docs/mobile/components/ReferenceLine.txt +2 -0
- package/mcp-docs/mobile/components/RemoteImage.txt +2 -0
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +2 -0
- package/mcp-docs/mobile/components/RollingNumber.txt +2 -0
- package/mcp-docs/mobile/components/Scrubber.txt +2 -0
- package/mcp-docs/mobile/components/SearchInput.txt +2 -0
- package/mcp-docs/mobile/components/SectionHeader.txt +2 -0
- package/mcp-docs/mobile/components/SegmentedTabs.txt +4 -2
- package/mcp-docs/mobile/components/Select.txt +2 -0
- package/mcp-docs/mobile/components/SelectAlpha.txt +2 -0
- package/mcp-docs/mobile/components/SelectChip.txt +2 -0
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +2 -0
- package/mcp-docs/mobile/components/SelectOption.txt +2 -0
- package/mcp-docs/mobile/components/SlideButton.txt +2 -0
- package/mcp-docs/mobile/components/Spacer.txt +2 -0
- package/mcp-docs/mobile/components/Sparkline.txt +2 -0
- package/mcp-docs/mobile/components/SparklineGradient.txt +2 -0
- package/mcp-docs/mobile/components/SparklineInteractive.txt +2 -0
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +2 -0
- package/mcp-docs/mobile/components/Spinner.txt +2 -0
- package/mcp-docs/mobile/components/SpotIcon.txt +2 -0
- package/mcp-docs/mobile/components/SpotRectangle.txt +2 -0
- package/mcp-docs/mobile/components/SpotSquare.txt +2 -0
- package/mcp-docs/mobile/components/Stepper.txt +2 -0
- package/mcp-docs/mobile/components/SubBrandLogoMark.txt +2 -0
- package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +2 -0
- package/mcp-docs/mobile/components/Switch.txt +2 -0
- package/mcp-docs/mobile/components/TabIndicator.txt +2 -0
- package/mcp-docs/mobile/components/TabLabel.txt +2 -0
- package/mcp-docs/mobile/components/TabNavigation.txt +2 -0
- package/mcp-docs/mobile/components/TabbedChips.txt +2 -0
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +2 -0
- package/mcp-docs/mobile/components/Tabs.txt +69 -107
- package/mcp-docs/mobile/components/Tag.txt +4 -2
- package/mcp-docs/mobile/components/Text.txt +2 -0
- package/mcp-docs/mobile/components/TextInput.txt +2 -0
- package/mcp-docs/mobile/components/ThemeProvider.txt +2 -0
- package/mcp-docs/mobile/components/Toast.txt +2 -0
- package/mcp-docs/mobile/components/Tooltip.txt +2 -0
- package/mcp-docs/mobile/components/TopNavBar.txt +2 -0
- package/mcp-docs/mobile/components/Tour.txt +13 -0
- package/mcp-docs/mobile/components/Tray.txt +2 -0
- package/mcp-docs/mobile/components/UpsellCard.txt +2 -0
- package/mcp-docs/mobile/components/VStack.txt +2 -0
- package/mcp-docs/mobile/components/XAxis.txt +2 -0
- package/mcp-docs/mobile/components/YAxis.txt +2 -0
- package/mcp-docs/mobile/getting-started/ai-overview.txt +2 -0
- package/mcp-docs/mobile/getting-started/colors.txt +66 -0
- package/mcp-docs/mobile/getting-started/installation.txt +2 -0
- package/mcp-docs/mobile/getting-started/introduction.txt +2 -0
- package/mcp-docs/mobile/getting-started/playground.txt +2 -0
- package/mcp-docs/mobile/getting-started/styling.txt +2 -0
- package/mcp-docs/mobile/getting-started/templates.txt +2 -0
- package/mcp-docs/mobile/getting-started/theming.txt +2 -0
- package/mcp-docs/mobile/guides/v8-migration-guide.txt +2 -0
- package/mcp-docs/mobile/hooks/useDimensions.txt +2 -0
- package/mcp-docs/mobile/hooks/useEventHandler.txt +2 -0
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +2 -0
- package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +2 -0
- package/mcp-docs/mobile/hooks/usePreviousValue.txt +2 -0
- package/mcp-docs/mobile/hooks/useRefMap.txt +2 -0
- package/mcp-docs/mobile/hooks/useTheme.txt +2 -0
- package/mcp-docs/mobile/routes.txt +3 -1
- package/mcp-docs/web/components/Accordion.txt +2 -0
- package/mcp-docs/web/components/AccordionItem.txt +2 -0
- package/mcp-docs/web/components/Alert.txt +2 -0
- package/mcp-docs/web/components/AreaChart.txt +231 -381
- package/mcp-docs/web/components/Avatar.txt +2 -0
- package/mcp-docs/web/components/AvatarButton.txt +2 -0
- package/mcp-docs/web/components/Banner.txt +3 -1
- package/mcp-docs/web/components/BarChart.txt +7 -3
- package/mcp-docs/web/components/Box.txt +2 -0
- package/mcp-docs/web/components/Button.txt +4 -2
- package/mcp-docs/web/components/ButtonGroup.txt +2 -0
- package/mcp-docs/web/components/Calendar.txt +2 -0
- package/mcp-docs/web/components/Carousel.txt +2 -0
- package/mcp-docs/web/components/CartesianChart.txt +22 -5
- package/mcp-docs/web/components/CellMedia.txt +3 -1
- package/mcp-docs/web/components/Checkbox.txt +2 -0
- package/mcp-docs/web/components/CheckboxCell.txt +2 -0
- package/mcp-docs/web/components/CheckboxGroup.txt +2 -0
- package/mcp-docs/web/components/Chip.txt +2 -0
- package/mcp-docs/web/components/Coachmark.txt +2 -0
- package/mcp-docs/web/components/Collapsible.txt +2 -0
- package/mcp-docs/web/components/Combobox.txt +2 -0
- package/mcp-docs/web/components/ContainedAssetCard.txt +2 -0
- package/mcp-docs/web/components/ContentCard.txt +2 -0
- package/mcp-docs/web/components/ContentCardBody.txt +2 -0
- package/mcp-docs/web/components/ContentCardFooter.txt +2 -0
- package/mcp-docs/web/components/ContentCardHeader.txt +2 -0
- package/mcp-docs/web/components/ContentCell.txt +2 -0
- package/mcp-docs/web/components/ControlGroup.txt +2 -0
- package/mcp-docs/web/components/DataCard.txt +100 -0
- package/mcp-docs/web/components/DateInput.txt +2 -0
- package/mcp-docs/web/components/DatePicker.txt +2 -0
- package/mcp-docs/web/components/Divider.txt +2 -0
- package/mcp-docs/web/components/DotCount.txt +2 -0
- package/mcp-docs/web/components/DotStatusColor.txt +2 -0
- package/mcp-docs/web/components/DotSymbol.txt +3 -1
- package/mcp-docs/web/components/Dropdown.txt +2 -0
- package/mcp-docs/web/components/Fallback.txt +2 -0
- package/mcp-docs/web/components/FloatingAssetCard.txt +2 -0
- package/mcp-docs/web/components/FocusTrap.txt +2 -0
- package/mcp-docs/web/components/FullscreenAlert.txt +3 -1
- package/mcp-docs/web/components/FullscreenModal.txt +2 -0
- package/mcp-docs/web/components/FullscreenModalLayout.txt +2 -0
- package/mcp-docs/web/components/Grid.txt +2 -0
- package/mcp-docs/web/components/GridColumn.txt +2 -0
- package/mcp-docs/web/components/HStack.txt +2 -0
- package/mcp-docs/web/components/HeroSquare.txt +3 -1
- package/mcp-docs/web/components/Icon.txt +3 -1
- package/mcp-docs/web/components/IconButton.txt +3 -1
- package/mcp-docs/web/components/InputChip.txt +2 -0
- package/mcp-docs/web/components/Interactable.txt +2 -0
- package/mcp-docs/web/components/Legend.txt +14 -2
- package/mcp-docs/web/components/LineChart.txt +3 -40
- package/mcp-docs/web/components/Link.txt +2 -0
- package/mcp-docs/web/components/ListCell.txt +2 -0
- package/mcp-docs/web/components/LogoMark.txt +2 -0
- package/mcp-docs/web/components/LogoWordMark.txt +2 -0
- package/mcp-docs/web/components/Lottie.txt +2 -0
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -0
- package/mcp-docs/web/components/MediaCard.txt +2 -0
- package/mcp-docs/web/components/MediaChip.txt +2 -0
- package/mcp-docs/web/components/MediaQueryProvider.txt +2 -0
- package/mcp-docs/web/components/MessagingCard.txt +2 -0
- package/mcp-docs/web/components/Modal.txt +2 -0
- package/mcp-docs/web/components/ModalBody.txt +2 -0
- package/mcp-docs/web/components/ModalFooter.txt +2 -0
- package/mcp-docs/web/components/ModalHeader.txt +3 -1
- package/mcp-docs/web/components/MultiContentModule.txt +2 -0
- package/mcp-docs/web/components/NavigationBar.txt +2 -0
- package/mcp-docs/web/components/NavigationTitle.txt +2 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +2 -0
- package/mcp-docs/web/components/NudgeCard.txt +2 -0
- package/mcp-docs/web/components/Overlay.txt +2 -0
- package/mcp-docs/web/components/PageFooter.txt +2 -0
- package/mcp-docs/web/components/PageHeader.txt +2 -0
- package/mcp-docs/web/components/Pagination.txt +2 -0
- package/mcp-docs/web/components/PercentageBarChart.txt +814 -0
- package/mcp-docs/web/components/PeriodSelector.txt +4 -2
- package/mcp-docs/web/components/Pictogram.txt +2 -0
- package/mcp-docs/web/components/Point.txt +2 -0
- package/mcp-docs/web/components/PopoverPanel.txt +283 -0
- package/mcp-docs/web/components/PortalProvider.txt +2 -0
- package/mcp-docs/web/components/Pressable.txt +2 -0
- package/mcp-docs/web/components/ProgressBar.txt +2 -0
- package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +2 -0
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +2 -0
- package/mcp-docs/web/components/ProgressCircle.txt +2 -0
- package/mcp-docs/web/components/Radio.txt +2 -0
- package/mcp-docs/web/components/RadioCell.txt +2 -0
- package/mcp-docs/web/components/RadioGroup.txt +2 -0
- package/mcp-docs/web/components/ReferenceLine.txt +2 -0
- package/mcp-docs/web/components/RemoteImage.txt +2 -0
- package/mcp-docs/web/components/RemoteImageGroup.txt +2 -0
- package/mcp-docs/web/components/RollingNumber.txt +2 -0
- package/mcp-docs/web/components/Scrubber.txt +2 -0
- package/mcp-docs/web/components/SearchInput.txt +2 -0
- package/mcp-docs/web/components/SectionHeader.txt +2 -0
- package/mcp-docs/web/components/SegmentedControl.txt +2 -0
- package/mcp-docs/web/components/SegmentedTabs.txt +4 -2
- package/mcp-docs/web/components/Select.txt +2 -0
- package/mcp-docs/web/components/SelectAlpha.txt +2 -0
- package/mcp-docs/web/components/SelectChip.txt +2 -0
- package/mcp-docs/web/components/SelectChipAlpha.txt +2 -0
- package/mcp-docs/web/components/SelectOption.txt +2 -0
- package/mcp-docs/web/components/Sidebar.txt +2 -0
- package/mcp-docs/web/components/SidebarItem.txt +3 -1
- package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -0
- package/mcp-docs/web/components/Spacer.txt +2 -0
- package/mcp-docs/web/components/Sparkline.txt +2 -0
- package/mcp-docs/web/components/SparklineGradient.txt +2 -0
- package/mcp-docs/web/components/SparklineInteractive.txt +2 -0
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +2 -0
- package/mcp-docs/web/components/Spinner.txt +2 -0
- package/mcp-docs/web/components/SpotIcon.txt +2 -0
- package/mcp-docs/web/components/SpotRectangle.txt +2 -0
- package/mcp-docs/web/components/SpotSquare.txt +2 -0
- package/mcp-docs/web/components/Stepper.txt +2 -0
- package/mcp-docs/web/components/SubBrandLogoMark.txt +2 -0
- package/mcp-docs/web/components/SubBrandLogoWordMark.txt +2 -0
- package/mcp-docs/web/components/Switch.txt +2 -0
- package/mcp-docs/web/components/TabIndicator.txt +2 -0
- package/mcp-docs/web/components/TabLabel.txt +2 -0
- package/mcp-docs/web/components/TabNavigation.txt +2 -0
- package/mcp-docs/web/components/TabbedChips.txt +2 -0
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +2 -0
- package/mcp-docs/web/components/Table.txt +2 -0
- package/mcp-docs/web/components/TableBody.txt +2 -0
- package/mcp-docs/web/components/TableCaption.txt +2 -0
- package/mcp-docs/web/components/TableCell.txt +2 -0
- package/mcp-docs/web/components/TableCellFallback.txt +2 -0
- package/mcp-docs/web/components/TableFooter.txt +2 -0
- package/mcp-docs/web/components/TableHeader.txt +2 -0
- package/mcp-docs/web/components/TableRow.txt +2 -0
- package/mcp-docs/web/components/Tabs.txt +72 -104
- package/mcp-docs/web/components/Tag.txt +4 -2
- package/mcp-docs/web/components/Text.txt +2 -0
- package/mcp-docs/web/components/TextInput.txt +2 -0
- package/mcp-docs/web/components/ThemeProvider.txt +2 -0
- package/mcp-docs/web/components/TileButton.txt +2 -0
- package/mcp-docs/web/components/Toast.txt +2 -0
- package/mcp-docs/web/components/Tooltip.txt +2 -0
- package/mcp-docs/web/components/Tour.txt +14 -0
- package/mcp-docs/web/components/Tray.txt +2 -0
- package/mcp-docs/web/components/UpsellCard.txt +2 -0
- package/mcp-docs/web/components/VStack.txt +2 -0
- package/mcp-docs/web/components/XAxis.txt +2 -0
- package/mcp-docs/web/components/YAxis.txt +2 -0
- package/mcp-docs/web/getting-started/ai-overview.txt +2 -0
- package/mcp-docs/web/getting-started/colors.txt +66 -0
- package/mcp-docs/web/getting-started/installation.txt +3 -1
- package/mcp-docs/web/getting-started/introduction.txt +2 -0
- package/mcp-docs/web/getting-started/playground.txt +2 -0
- package/mcp-docs/web/getting-started/styling.txt +2 -0
- package/mcp-docs/web/getting-started/templates.txt +2 -0
- package/mcp-docs/web/getting-started/theming.txt +2 -0
- package/mcp-docs/web/guides/v8-migration-guide.txt +2 -0
- package/mcp-docs/web/hooks/useBreakpoints.txt +2 -0
- package/mcp-docs/web/hooks/useDimensions.txt +2 -0
- package/mcp-docs/web/hooks/useEventHandler.txt +2 -0
- package/mcp-docs/web/hooks/useHasMounted.txt +2 -0
- package/mcp-docs/web/hooks/useIsoEffect.txt +2 -0
- package/mcp-docs/web/hooks/useMediaQuery.txt +2 -0
- package/mcp-docs/web/hooks/useMergeRefs.txt +2 -0
- package/mcp-docs/web/hooks/useOverlayContentContext.txt +2 -0
- package/mcp-docs/web/hooks/usePreviousValue.txt +2 -0
- package/mcp-docs/web/hooks/useRefMap.txt +2 -0
- package/mcp-docs/web/hooks/useScrollBlocker.txt +2 -0
- package/mcp-docs/web/hooks/useTheme.txt +2 -0
- package/mcp-docs/web/routes.txt +4 -1
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Button
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Button/?platform=mobile
|
|
4
|
+
|
|
3
5
|
A pressable button element.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -314,7 +316,7 @@ A full-width primary action with a compact secondary option.
|
|
|
314
316
|
| `display` | `flex \| none` | No | `-` | - |
|
|
315
317
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. Is the element elevated. |
|
|
316
318
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
|
|
317
|
-
| `endIcon` | `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 to render at the end of the button. |
|
|
319
|
+
| `endIcon` | `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 \| caretCollapse \| caretDown \| caretExpand \| 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 to render at the end of the button. |
|
|
318
320
|
| `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
|
|
319
321
|
| `feedback` | `none \| light \| normal \| heavy` | No | `none` | Haptic feedback to trigger when being pressed. |
|
|
320
322
|
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
@@ -367,7 +369,7 @@ A full-width primary action with a compact secondary option.
|
|
|
367
369
|
| `right` | `string \| number` | No | `-` | - |
|
|
368
370
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
369
371
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the start node |
|
|
370
|
-
| `startIcon` | `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 to render at the start of the button. |
|
|
372
|
+
| `startIcon` | `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 \| caretCollapse \| caretDown \| caretExpand \| 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 to render at the start of the button. |
|
|
371
373
|
| `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
|
|
372
374
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID Used to locate this element in unit and end-to-end tests. |
|
|
373
375
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Calendar
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/other/Calendar/?platform=mobile
|
|
4
|
+
|
|
3
5
|
Calendar is a flexible, accessible date grid component for selecting dates, supporting keyboard navigation, disabled/highlighted dates, and custom rendering.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# CartesianChart
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/charts/CartesianChart/?platform=mobile
|
|
4
|
+
|
|
3
5
|
A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -10,7 +12,7 @@ import { CartesianChart } from '@coinbase/cds-mobile-visualization'
|
|
|
10
12
|
|
|
11
13
|
## Examples
|
|
12
14
|
|
|
13
|
-
CartesianChart is a customizable,
|
|
15
|
+
CartesianChart is a customizable, `@shopify/react-native-skia` based component that can be used to display a variety of data in a x/y coordinate space. The underlying logic is handled by D3.
|
|
14
16
|
|
|
15
17
|
### Basics
|
|
16
18
|
|
|
@@ -694,7 +696,7 @@ function PriceWithVolume() {
|
|
|
694
696
|
const theme = useTheme();
|
|
695
697
|
|
|
696
698
|
const [scrubIndex, setScrubIndex] = useState(null);
|
|
697
|
-
const btcData = btcCandles.slice(0, 180)
|
|
699
|
+
const btcData = [...btcCandles].reverse().slice(0, 180);
|
|
698
700
|
|
|
699
701
|
const btcPrices = btcData.map((candle) => parseFloat(candle.close));
|
|
700
702
|
const btcVolumes = btcData.map((candle) => parseFloat(candle.volume));
|
|
@@ -734,12 +736,24 @@ function PriceWithVolume() {
|
|
|
734
736
|
? (currentPrice - btcPrices[displayIndex - 1]) / btcPrices[displayIndex - 1]
|
|
735
737
|
: 0;
|
|
736
738
|
|
|
737
|
-
const
|
|
739
|
+
const chartAccessibilityLabel = useMemo(() => {
|
|
738
740
|
if (scrubIndex === null)
|
|
739
741
|
return `Current Bitcoin price: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
|
|
740
742
|
return `Bitcoin price at ${formatDate(currentDate)}: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
|
|
741
743
|
}, [scrubIndex, currentPrice, currentVolume, currentDate, formatPrice, formatVolume, formatDate]);
|
|
742
744
|
|
|
745
|
+
const getScrubberAccessibilityLabel = useCallback(
|
|
746
|
+
(dataIndex: number) =>
|
|
747
|
+
`Bitcoin on ${formatDate(btcDates[dataIndex])}. Price ${formatPrice(btcPrices[dataIndex])}. Volume ${formatVolume(btcVolumes[dataIndex])}.`,
|
|
748
|
+
[btcDates, btcPrices, btcVolumes, formatDate, formatPrice, formatVolume],
|
|
749
|
+
);
|
|
750
|
+
|
|
751
|
+
const scrubberLabel = useCallback(
|
|
752
|
+
(dataIndex: number) =>
|
|
753
|
+
`${formatPrice(btcPrices[dataIndex])} ${formatDate(btcDates[dataIndex])}`,
|
|
754
|
+
[btcDates, btcPrices, formatDate, formatPrice],
|
|
755
|
+
);
|
|
756
|
+
|
|
743
757
|
const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
|
|
744
758
|
|
|
745
759
|
const headerId = useId();
|
|
@@ -766,7 +780,7 @@ function PriceWithVolume() {
|
|
|
766
780
|
<CartesianChart
|
|
767
781
|
enableScrubbing
|
|
768
782
|
onScrubberPositionChange={setScrubIndex}
|
|
769
|
-
height={
|
|
783
|
+
height={250}
|
|
770
784
|
series={[
|
|
771
785
|
{
|
|
772
786
|
id: 'prices',
|
|
@@ -792,8 +806,9 @@ function PriceWithVolume() {
|
|
|
792
806
|
range: ({ min, max }) => ({ min: max - 32, max }),
|
|
793
807
|
},
|
|
794
808
|
]}
|
|
795
|
-
accessibilityLabel={
|
|
809
|
+
accessibilityLabel={chartAccessibilityLabel}
|
|
796
810
|
aria-labelledby={headerId}
|
|
811
|
+
getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
|
|
797
812
|
inset={{ top: 8, left: 8, right: 0, bottom: 0 }}
|
|
798
813
|
>
|
|
799
814
|
<YAxis
|
|
@@ -805,7 +820,7 @@ function PriceWithVolume() {
|
|
|
805
820
|
/>
|
|
806
821
|
<BarPlot seriesIds={['volume']} />
|
|
807
822
|
<Line seriesId="prices" showArea />
|
|
808
|
-
<Scrubber seriesIds={['prices']} />
|
|
823
|
+
<Scrubber label={scrubberLabel} seriesIds={['prices']} />
|
|
809
824
|
</CartesianChart>
|
|
810
825
|
</VStack>
|
|
811
826
|
);
|
|
@@ -1161,7 +1176,7 @@ function TradingTrends() {
|
|
|
1161
1176
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
1162
1177
|
| `width` | `string \| number` | No | `-` | - |
|
|
1163
1178
|
| `xAxis` | `Partial<CartesianAxisConfigProps> \| Partial<CartesianAxisConfigProps>[]` | No | `-` | Configuration for x-axis(es). Can be a single config or array of configs. |
|
|
1164
|
-
| `yAxis` | `Partial<
|
|
1179
|
+
| `yAxis` | `Partial<CartesianAxisConfigProps> \| Partial<CartesianAxisConfigProps>[]` | No | `-` | Configuration for y-axis(es). Can be a single config or array of configs. |
|
|
1165
1180
|
| `zIndex` | `number` | No | `-` | - |
|
|
1166
1181
|
|
|
1167
1182
|
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# CellMedia
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/media/CellMedia/?platform=mobile
|
|
4
|
+
|
|
3
5
|
Displays media within cells.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -58,7 +60,7 @@ Used for displaying pictographic illustrations with accessibility hints.
|
|
|
58
60
|
| Prop | Type | Required | Default | Description |
|
|
59
61
|
| --- | --- | --- | --- | --- |
|
|
60
62
|
| `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
|
|
61
|
-
| `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 | `-` | - |
|
|
63
|
+
| `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 \| caretCollapse \| caretDown \| caretExpand \| 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 | `-` | - |
|
|
62
64
|
| `source` | `string \| number` | Yes | `-` | - |
|
|
63
65
|
| `type` | `image \| avatar \| icon \| pictogram \| asset` | Yes | `-` | - |
|
|
64
66
|
| `active` | `boolean` | No | `-` | Whether the icon is active |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Checkbox
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Checkbox/?platform=mobile
|
|
4
|
+
|
|
3
5
|
Checkbox is a type of control component that allows user to select one or more options from a set. They can also be used alone to switch between on and off.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# CheckboxGroup
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/inputs/CheckboxGroup/?platform=mobile
|
|
4
|
+
|
|
3
5
|
CheckboxGroup is a control component that allows users to select multiple options from a set of choices. It manages the state and layout of multiple checkbox inputs as a cohesive group.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Coachmark
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/navigation/Coachmark/?platform=mobile
|
|
4
|
+
|
|
3
5
|
Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help in React Native apps. It supports custom content, actions, and media.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# ContainedAssetCard
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/cards/ContainedAssetCard/?platform=mobile
|
|
4
|
+
|
|
3
5
|
Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# ContentCard
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/cards/ContentCard/?platform=mobile
|
|
4
|
+
|
|
3
5
|
A flexible, composable card component for displaying rich content with customizable header, body, and footer sections. Use with ContentCardHeader, ContentCardBody, and ContentCardFooter sub-components.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# ContentCardFooter
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/cards/ContentCardFooter/?platform=mobile
|
|
4
|
+
|
|
3
5
|
ContentCardFooter is a subcomponent of ContentCard that provides the footer section of the card, typically used for actions or additional information.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# ContentCardHeader
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/cards/ContentCardHeader/?platform=mobile
|
|
4
|
+
|
|
3
5
|
ContentCardHeader is a subcomponent of ContentCard that provides the header section of the card, typically used for the title and subtitle.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# DataCard
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/cards/DataCard/?platform=mobile
|
|
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
|
|
@@ -86,6 +88,60 @@ function Example() {
|
|
|
86
88
|
}
|
|
87
89
|
```
|
|
88
90
|
|
|
91
|
+
### With PercentageBarChart
|
|
92
|
+
|
|
93
|
+
`PercentageBarChart` can be passed directly as the `children` of a `DataCard` to visualize part-to-whole data alongside a title and subtitle.
|
|
94
|
+
|
|
95
|
+
```jsx
|
|
96
|
+
function Example() {
|
|
97
|
+
const theme = useTheme();
|
|
98
|
+
|
|
99
|
+
function PredictionCard({ question, subtitle, yesValue }) {
|
|
100
|
+
const noValue = 100 - yesValue;
|
|
101
|
+
|
|
102
|
+
return (
|
|
103
|
+
<DataCard layout="vertical" subtitle={subtitle} title={question}>
|
|
104
|
+
<Box paddingTop={2}>
|
|
105
|
+
<PercentageBarChart
|
|
106
|
+
barMinSize={8}
|
|
107
|
+
borderRadius={8}
|
|
108
|
+
height={48}
|
|
109
|
+
legend={<Legend paddingTop={2} />}
|
|
110
|
+
series={[
|
|
111
|
+
{ id: 'yes', data: yesValue, label: 'Yes', color: theme.color.fgPositive },
|
|
112
|
+
{ id: 'no', data: noValue, label: 'No', color: theme.color.fgNegative },
|
|
113
|
+
]}
|
|
114
|
+
stackGap={4}
|
|
115
|
+
/>
|
|
116
|
+
</Box>
|
|
117
|
+
</DataCard>
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<VStack gap={2}>
|
|
123
|
+
<DataCard layout="vertical" subtitle="Top holdings" title="Portfolio Allocation">
|
|
124
|
+
<Box paddingTop={2}>
|
|
125
|
+
<PercentageBarChart
|
|
126
|
+
barMinSize={8}
|
|
127
|
+
borderRadius={8}
|
|
128
|
+
height={48}
|
|
129
|
+
legend={<Legend paddingTop={2} />}
|
|
130
|
+
series={[
|
|
131
|
+
{ id: 'btc', data: 55, label: 'BTC', color: assets.btc.color },
|
|
132
|
+
{ id: 'eth', data: 30, label: 'ETH', color: assets.eth.color },
|
|
133
|
+
{ id: 'sushi', data: 15, label: 'SUSHI', color: assets.sushi.color },
|
|
134
|
+
]}
|
|
135
|
+
stackGap={4}
|
|
136
|
+
/>
|
|
137
|
+
</Box>
|
|
138
|
+
</DataCard>
|
|
139
|
+
<PredictionCard question="Will BTC reach $200k?" subtitle="Closes Dec 31" yesValue={62} />
|
|
140
|
+
</VStack>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
89
145
|
### Layout Variations
|
|
90
146
|
|
|
91
147
|
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
|
# DatePicker
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/other/DatePicker/?platform=mobile
|
|
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.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# DotCount
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/other/DotCount/?platform=mobile
|
|
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/?platform=mobile
|
|
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/?platform=mobile
|
|
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
|
|
@@ -120,7 +122,7 @@ function UseDotSymbolPairedWithAnotherAsset() {
|
|
|
120
122
|
| `borderColor` | `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 | `-` | - |
|
|
121
123
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The element that the dot will anchor to |
|
|
122
124
|
| `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 |
|
|
123
|
-
| `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. |
|
|
125
|
+
| `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 \| caretCollapse \| caretDown \| caretExpand \| 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. |
|
|
124
126
|
| `iconStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
125
127
|
| `imageStyle` | `null \| false \| ImageStyle \| RegisteredStyle<ImageStyle> \| RecursiveArray<Falsy \| ImageStyle \| RegisteredStyle<ImageStyle>>` | No | `-` | - |
|
|
126
128
|
| `overlap` | `circular` | No | `-` | Indicates what shape dot is overlapping |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# FloatingAssetCard
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/cards/FloatingAssetCard/?platform=mobile
|
|
4
|
+
|
|
3
5
|
Asset Cards display current and potential future assets, offering a straightforward method to view and manage a customer's holdings.
|
|
4
6
|
|
|
5
7
|
## Import
|