@coinbase/cds-mcp-server 8.62.0 → 8.66.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +3 -1
- 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 +3 -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 +2 -0
- 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 +3 -1
- 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 +3 -1
- 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 +2 -0
- 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 +2 -0
- package/mcp-docs/web/components/LineChart.txt +3 -1
- 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
|
# useEventHandler
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/hooks/useEventHandler/
|
|
4
|
+
|
|
3
5
|
Creates event handlers for components based on the EventHandlerProvider configuration. It enables centralized event handling and analytics tracking by mapping component actions to configured handlers.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# useMergeRefs
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/hooks/useMergeRefs/
|
|
4
|
+
|
|
3
5
|
Combines multiple refs into a single ref callback, allowing a component to work with multiple ref instances simultaneously. Useful when you need to combine refs from different sources, such as forwarded refs and internal component state.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# useOverlayContentContext
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/hooks/useOverlayContentContext/?platform=mobile
|
|
4
|
+
|
|
3
5
|
A React context and hook for detecting if components are rendered inside overlay containers like modals, drawers, tours, and trays.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# useRefMap
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/hooks/useRefMap/
|
|
4
|
+
|
|
3
5
|
Manages a collection of refs using a key-value map structure, allowing dynamic registration and retrieval of refs by their unique identifiers. Commonly used in components that need to track multiple DOM elements, such as tabs, tours, or complex navigation systems.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
- [playground](mobile/getting-started/playground.txt)
|
|
10
10
|
- [introduction](mobile/getting-started/introduction.txt)
|
|
11
11
|
- [installation](mobile/getting-started/installation.txt): This guide will help you get started with installing CDS in your React Native project. Follow the instructions below to set up CDS and start building with our cross-platform components.
|
|
12
|
+
- [colors](mobile/getting-started/colors.txt)
|
|
12
13
|
- [ai-overview](mobile/getting-started/ai-overview.txt)
|
|
13
14
|
|
|
14
15
|
## Components
|
|
@@ -36,7 +37,7 @@
|
|
|
36
37
|
- [RollingNumber](mobile/components/RollingNumber.txt): A numeric display that animates value changes with rolling digits.
|
|
37
38
|
- [Tour](mobile/components/Tour.txt): Creates guided tours of a user interface.
|
|
38
39
|
- [TopNavBar](mobile/components/TopNavBar.txt): A customizable top navigation bar that can contain start, middle, and end content, as well as a bottom section for elements like tabs. It remains sticky at the top of the screen.
|
|
39
|
-
- [Tabs](mobile/components/Tabs.txt): Tabs is a flexible, accessible tab
|
|
40
|
+
- [Tabs](mobile/components/Tabs.txt): Tabs is a flexible, accessible tab list for switching between related views. Use `DefaultTab` and `DefaultTabsActiveIndicator` for a standard underline tab row without custom tab wiring, or provide your own `TabComponent` and `TabsActiveIndicatorComponent`. For pill-style selection, see SegmentedTabs.
|
|
40
41
|
- [TabbedChipsAlpha](mobile/components/TabbedChipsAlpha.txt): A chip component commonly used in filter context to refine a date source
|
|
41
42
|
- [TabbedChips](mobile/components/TabbedChips.txt): Tab chips are to be used in a filter setting where the user is given the ability to refine the data source they are accessing.
|
|
42
43
|
- [TabNavigation](mobile/components/TabNavigation.txt): Organizes content across different screens or data sets.
|
|
@@ -121,6 +122,7 @@
|
|
|
121
122
|
- [ReferenceLine](mobile/components/ReferenceLine.txt): A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.
|
|
122
123
|
- [Point](mobile/components/Point.txt): Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and labels.
|
|
123
124
|
- [PeriodSelector](mobile/components/PeriodSelector.txt): A selector component for choosing time periods in charts.
|
|
125
|
+
- [PercentageBarChart](mobile/components/PercentageBarChart.txt): A bar chart component for comparing share or mix across categories as percentages. Supports horizontal and vertical orientations, 100% stacked bars, and a fixed 0–100% value axis.
|
|
124
126
|
- [LineChart](mobile/components/LineChart.txt): A flexible line chart component for displaying data trends over time. Supports multiple series, custom curves, areas, scrubbing, and interactive data exploration.
|
|
125
127
|
- [Legend](mobile/components/Legend.txt): A legend component for displaying series information in charts. Supports customizable shapes, layouts, and custom item components.
|
|
126
128
|
- [CartesianChart](mobile/components/CartesianChart.txt): 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.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# AreaChart
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/charts/AreaChart/
|
|
4
|
+
|
|
3
5
|
A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -634,7 +636,7 @@ function XAxisGradient() {
|
|
|
634
636
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
635
637
|
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
636
638
|
| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition for updates. |
|
|
637
|
-
| `transitions` | `{ enter?: Transition$1 \| null; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'tween', duration: 0.5 }, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
|
|
639
|
+
| `transitions` | `{ enter?: Transition$1 \| null; enterOpacity?: Transition$1 \| null \| undefined; update?: Transition$1 \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'tween', duration: 0.5 }, enterOpacity: undefined, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
|
|
638
640
|
| `type` | `dotted \| solid \| gradient` | No | `'solid'` | The type of area to render. |
|
|
639
641
|
| `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
|
|
640
642
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Banner
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/feedback/Banner/
|
|
4
|
+
|
|
3
5
|
Displays important messages and actions to users.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -172,7 +174,7 @@ When using negative `margin*` props to create a bleed effect, explicitly set `wi
|
|
|
172
174
|
|
|
173
175
|
| Prop | Type | Required | Default | Description |
|
|
174
176
|
| --- | --- | --- | --- | --- |
|
|
175
|
-
| `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` | Yes | `-` | Name of icon to be shown in the banner |
|
|
177
|
+
| `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 \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | Name of icon to be shown in the banner |
|
|
176
178
|
| `variant` | `warning \| promotional \| informational \| error` | Yes | `-` | Sets the variant of the banner - which is responsible for foreground and background color assignment |
|
|
177
179
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
178
180
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# BarChart
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/charts/BarChart/
|
|
4
|
+
|
|
3
5
|
A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -1416,7 +1418,7 @@ function BuyVsSellExample() {
|
|
|
1416
1418
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
1417
1419
|
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
1418
1420
|
| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition for updates. |
|
|
1419
|
-
| `transitions` | `{ enter?: BarTransition \| null; update?: BarTransition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'spring', stiffness: 900, damping: 120, mass: 4, staggerDelay: 0.25 }, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
|
|
1421
|
+
| `transitions` | `{ enter?: BarTransition \| null; enterOpacity?: BarTransition \| null \| undefined; update?: BarTransition \| null \| undefined; } \| undefined` | No | `transitions = {{ enter: { type: 'spring', stiffness: 900, damping: 120, mass: 4, staggerDelay: 0.25 }, enterOpacity: { type: 'tween', duration: 0.2 }, update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 } }}` | Transition configuration for enter and update animations. |
|
|
1420
1422
|
| `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
|
|
1421
1423
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
1422
1424
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Button
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/inputs/Button/
|
|
4
|
+
|
|
3
5
|
A pressable button element.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -397,7 +399,7 @@ A full-width primary action with a compact secondary option.
|
|
|
397
399
|
| `draggable` | `Booleanish \| undefined` | No | `-` | - |
|
|
398
400
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
399
401
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the end node |
|
|
400
|
-
| `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. |
|
|
402
|
+
| `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 \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the end of the button. |
|
|
401
403
|
| `endIconActive` | `boolean` | No | `-` | Whether the end icon is active |
|
|
402
404
|
| `enterKeyHint` | `search \| enter \| done \| go \| next \| previous \| send \| undefined` | No | `-` | - |
|
|
403
405
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
@@ -653,7 +655,7 @@ A full-width primary action with a compact secondary option.
|
|
|
653
655
|
| `slot` | `string \| undefined` | No | `-` | - |
|
|
654
656
|
| `spellCheck` | `Booleanish \| undefined` | No | `-` | - |
|
|
655
657
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Set the start node |
|
|
656
|
-
| `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. |
|
|
658
|
+
| `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 \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | No | `-` | Icon to render at the start of the button. |
|
|
657
659
|
| `startIconActive` | `boolean` | No | `-` | Whether the start icon is active |
|
|
658
660
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
659
661
|
| `suppressContentEditableWarning` | `boolean \| undefined` | No | `-` | - |
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Calendar
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/other/Calendar/
|
|
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/
|
|
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
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# CellMedia
|
|
2
2
|
|
|
3
|
+
**📖 Live documentation:** https://cds.coinbase.com/components/media/CellMedia/
|
|
4
|
+
|
|
3
5
|
Displays media within cells.
|
|
4
6
|
|
|
5
7
|
## Import
|
|
@@ -45,7 +47,7 @@ Used for displaying pictographic illustrations, commonly used in empty states or
|
|
|
45
47
|
| Prop | Type | Required | Default | Description |
|
|
46
48
|
| --- | --- | --- | --- | --- |
|
|
47
49
|
| `illustration` | `ReactElement<PictogramBaseProps, string \| JSXElementConstructor<any>>` | Yes | `-` | - |
|
|
48
|
-
| `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 | `-` | - |
|
|
50
|
+
| `name` | `key \| search \| pin \| filter \| visible \| continuous \| auto \| column \| loop \| image \| menu \| list \| application \| document \| grid \| group \| warning \| error \| account \| activity \| add \| addPeople \| advancedMarketSelector \| advancedTradeProduct \| affiliates \| airdrop \| airdropAlt \| airdropCoins \| airdropParachute \| alien \| allTimeHigh \| allocation \| annotation \| api \| apiPlug \| apothecary \| appSwitcher \| apple \| appleLogo \| arrowDown \| arrowLeft \| arrowRight \| arrowUp \| arrowsHorizontal \| arrowsUpDown \| arrowsVertical \| artwork \| assetHubProduct \| assetManagementProduct \| astronautHelmet \| atSign \| atomScience \| autoCar \| avatar \| average \| backArrow \| ballot \| ballotbox \| bandage \| bank \| barChartSimple \| barChartWindow \| base \| baseApps \| baseFeed \| baseLock \| baseNotification \| baseQuickBuy \| baseSquare \| baseTransact \| baseVerification \| baseWallet \| baseball \| basketball \| beaker \| beginningArrow \| bell \| bellCheck \| bellPlus \| birthcertificate \| block \| blockchain \| blog \| book \| bookmark \| borrowProduct \| boxing \| bridging \| briefcase \| briefcaseAlt \| browser \| bug \| building \| calculator \| calendar \| calendarBlank \| calendarDates \| calendarEmpty \| calendarHeart \| calendarMoney \| calendarStar \| camera \| candlesticks \| car \| card \| caret \| caretDown \| caretLeft \| caretRight \| caretUp \| cash \| cashAustralianDollar \| cashBrazilianReal \| cashBrazillianReal \| cashCanadianDollar \| cashCoins \| cashEUR \| cashGBP \| cashIndonesianRupiah \| cashJPY \| cashPhilippinePeso \| cashPolishZloty \| cashRupee \| cashSingaporeDollar \| cashSwissFranc \| cashThaiBaht \| cashTurkishLira \| cashUSD \| cashUaeDirham \| cashVietnameseDong \| chainLink \| chartBar \| chartCandles \| chartLine \| chartPie \| chartPieCircle \| chartVolume \| chatBotAgent \| chatBubble \| chatRequests \| checkboxChecked \| checkboxEmpty \| checkmark \| chess \| circleCheckmark \| circleCross \| circulatingSupply \| city \| clipboard \| clock \| clockOutline \| close \| closeCaption \| clothing \| cloud \| cloudPartial \| cloudProduct \| cluster \| coinbase \| coinbaseCardProduct \| coinbaseOne \| coinbaseOneCard \| coinbaseOneLogo \| coinbaseRewards \| coinsCrypto \| collapse \| collectibles \| collection \| comment \| commentPlus \| commerceProduct \| compass \| complianceProduct \| compose \| computerChip \| concierge \| conciergeBell \| config \| convert \| copy \| corporation \| creatorCoin \| cricket \| cross \| crossTrade \| crypto \| cryptobasics \| crystalBall \| crystalBallInsight \| currencies \| custodyProduct \| dashboard \| dataMarketplaceProduct \| dataStack \| defi \| delegateProduct \| deposit \| derivatives \| derivativesProduct \| derivativesProductNew \| developerAPIProduct \| developerPlatformProduct \| dex \| diagonalDownArrow \| diagonalRightArrow \| diagonalUpArrow \| diamond \| diamondIncentives \| dinnerPlate \| directDeposit \| directDepositIcon \| disabledPhone \| discordLogo \| distribution \| documentation \| dot \| doubleChevronRight \| downArrow \| download \| drag \| drops \| earn \| earnProduct \| earnRewards \| earthquake \| educationBook \| educationPencil \| email \| endArrow \| entertainment \| ethereum \| eventContracts \| exchangeProduct \| exclamationMark \| expand \| expandAddress \| expandAll \| externalLink \| eye \| faceScan \| faces \| factory \| faucet \| fib \| filmStrip \| filterLineStack \| fingerprint \| flame \| folder \| folderArrow \| folderOpen \| followAdd \| following \| football \| fork \| forwardArrow \| fscsProtection \| gab \| games \| gaming \| gasFees \| gasFeesAlt \| gauge \| gaugeEmpty \| gaugeHigh \| gaugeHighLow \| gaugeHighMid \| gaugeLow \| gaugeLowHigh \| gaugeLowMid \| gaugeMedium \| gavel \| gear \| generalCharacter \| ghost \| gif \| giftBox \| giftCard \| gitHubLogo \| globe \| golf \| googleLogo \| greenEnergy \| hamburger \| hammer \| heart \| helpCenterProduct \| helpCenterQuestionMark \| hiddenEye \| hockey \| home \| horizontalLine \| hospital \| hospitalCross \| hurricane \| ideal \| identityCard \| info \| initiator \| instagramLogo \| instantUnstakingClock \| institute \| institutionalProduct \| interest \| invisible \| invoice \| keyboard \| laptop \| leadChart \| leadCoin \| learningRewardsProduct \| light \| lightbulb \| lightning \| lightningBolt \| lineChartCrypto \| location \| lock \| login \| logout \| magnifyingGlass \| marketCap \| medal \| megaphone \| metaverse \| microphone \| microphoneCordless \| microscope \| mint \| minus \| mma \| moneyCardCoin \| moon \| more \| moreVertical \| motorsport \| music \| musicArticles \| needle \| newsFeed \| newsletter \| nft \| nftBuy \| nftOffer \| nftProduct \| nftSale \| noRocket \| noWifi \| nodeProduct \| oil \| options \| orderBook \| orderHistory \| outline \| overPredictions \| pFPS \| paperAirplane \| paperclip \| participate \| participateProduct \| passKey \| passport \| pause \| pay \| payProduct \| paymentCard \| payments \| payouts \| paypal \| pencil \| peopleGroup \| peopleStar \| percentage \| perpetualSwap \| phone \| pieChartData \| pieChartWithArrow \| pillBottle \| pillCapsule \| plane \| planet \| play \| playbutton \| plusMinus \| podiumStar \| politicsBuilding \| politicsCandidate \| politicsFlag \| politicsGavel \| politicsPodium \| politicsStar \| powerTool \| priceAlerts \| priceAlertsCheck \| primePoduct \| privateClientProduct \| proProduct \| profile \| protection \| pulse \| pyramid \| qrCode \| qrCodeAlt \| queryTransact \| questionMark \| quotation \| rain \| ratingsCheck \| ratingsChecks \| ratingsStar \| reCenter \| rectangle \| recurring \| refresh \| regulated \| regulatedFutures \| report \| rewardsProduct \| ribbon \| robot \| rocket \| rocketShip \| rollingSpot \| rosettaProduct \| rottenTomato \| royalty \| safe \| save \| savingsBank \| scanQrCode \| scienceAtom \| scienceBeaker \| scienceMoon \| securityKey \| securityShield \| seen \| sendReceive \| setPinCode \| settings \| share \| shield \| shieldOutline \| shoe \| shoppingCart \| signinProduct \| singleCoin \| singleNote \| singlecloud \| smartContract \| snow \| soccer \| socialChat \| socialReshare \| socialShare \| sofort \| sortDoubleArrow \| sortDown \| sortDownCenter \| sortUp \| sortUpCenter \| soundOff \| soundOn \| sparkle \| speaker \| speechBubble \| stableCoin \| stablecoinStack \| staggeredList \| stake \| staking \| star \| starAward \| starBubble \| starTrophy \| statusDot \| step0 \| step1 \| step2 \| step3 \| step4 \| step5 \| step6 \| step7 \| step8 \| step9 \| strategy \| sun \| support \| tag \| taxes \| taxesReceipt \| telephone \| tennis \| test \| thermometer \| thumbsDown \| thumbsDownOutline \| thumbsUp \| thumbsUpOutline \| tokenLaunchCoin \| tokenLaunchRocket \| tokenSales \| tornado \| trading \| transactions \| trashCan \| trophy \| trophyCup \| tshirt \| tv \| tvStand \| twitterLogo \| ultility \| umbrella \| underPredictions \| undo \| unfollowPeople \| unknown \| unlock \| upArrow \| upload \| usdc \| venturesProduct \| verifiedBadge \| verifiedPools \| verticalLine \| virus \| waasProduct \| wallet \| walletLogo \| walletProduct \| webhooks \| wellness \| wifi \| wind \| wireTransfer \| withdraw \| wrapToken \| xLogo` | Yes | `-` | - |
|
|
49
51
|
| `source` | `string \| number` | Yes | `-` | - |
|
|
50
52
|
| `type` | `image \| avatar \| pictogram \| asset \| icon` | Yes | `-` | - |
|
|
51
53
|
| `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/
|
|
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/
|
|
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/
|
|
4
|
+
|
|
3
5
|
Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help. It supports custom content, actions, and media.
|
|
4
6
|
|
|
5
7
|
## Import
|