@coinbase/cds-mcp-server 8.58.0 → 8.60.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 +8 -0
- package/mcp-docs/mobile/components/Alert.txt +1 -1
- package/mcp-docs/mobile/components/Button.txt +29 -1
- package/mcp-docs/mobile/components/Checkbox.txt +1 -0
- package/mcp-docs/mobile/components/CheckboxCell.txt +1 -0
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/IconButton.txt +1 -0
- package/mcp-docs/mobile/components/ModalFooter.txt +2 -2
- package/mcp-docs/mobile/components/NudgeCard.txt +1 -1
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBar.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/mobile/components/ProgressCircle.txt +62 -2
- package/mcp-docs/mobile/components/Radio.txt +2 -0
- package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/Alert.txt +1 -1
- package/mcp-docs/web/components/Button.txt +31 -1
- package/mcp-docs/web/components/Checkbox.txt +1 -0
- package/mcp-docs/web/components/CheckboxCell.txt +1 -0
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/IconButton.txt +58 -1
- package/mcp-docs/web/components/ModalFooter.txt +2 -2
- package/mcp-docs/web/components/NudgeCard.txt +1 -1
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/ProgressBar.txt +1 -1
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/web/components/ProgressCircle.txt +62 -2
- package/mcp-docs/web/components/Radio.txt +2 -0
- package/mcp-docs/web/components/SpotSquare.txt +1 -1
- package/mcp-docs/web/components/TileButton.txt +1 -1
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.60.0 ((3/29/2026, 10:49 AM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
15
|
+
## 8.59.0 ((3/27/2026, 05:43 AM PST))
|
|
16
|
+
|
|
17
|
+
This is an artificial version bump with no new change.
|
|
18
|
+
|
|
11
19
|
## 8.58.0 ((3/25/2026, 11:42 AM PST))
|
|
12
20
|
|
|
13
21
|
This is an artificial version bump with no new change.
|
|
@@ -149,7 +149,7 @@ function AlertOnModalExample() {
|
|
|
149
149
|
| `onDidClose` | `(() => void)` | No | `-` | Callback fired after the component is closed. |
|
|
150
150
|
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
|
|
151
151
|
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
|
|
152
|
-
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
|
|
152
|
+
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
|
|
153
153
|
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
|
|
154
154
|
| `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
|
|
155
155
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
@@ -68,7 +68,34 @@ Use transparent buttons for supplementary actions with lower prominence. The con
|
|
|
68
68
|
|
|
69
69
|
#### Loading
|
|
70
70
|
|
|
71
|
-
Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a
|
|
71
|
+
Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a loading indicator (indeterminate [ProgressCircle](/components/feedback/ProgressCircle)) while preserving its width.
|
|
72
|
+
|
|
73
|
+
##### Loading by variant
|
|
74
|
+
|
|
75
|
+
Loading works with all variants and transparent. The label is hidden and the progress circle is shown in the button’s accent color.
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
<HStack gap={2} flexWrap="wrap" alignItems="center">
|
|
79
|
+
<Button loading>Primary</Button>
|
|
80
|
+
<Button loading variant="secondary">
|
|
81
|
+
Secondary
|
|
82
|
+
</Button>
|
|
83
|
+
<Button loading variant="tertiary">
|
|
84
|
+
Tertiary
|
|
85
|
+
</Button>
|
|
86
|
+
<Button loading variant="negative">
|
|
87
|
+
Negative
|
|
88
|
+
</Button>
|
|
89
|
+
<Button loading transparent variant="secondary">
|
|
90
|
+
Transparent
|
|
91
|
+
</Button>
|
|
92
|
+
<Button loading compact>
|
|
93
|
+
Compact
|
|
94
|
+
</Button>
|
|
95
|
+
</HStack>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
##### Basic loading
|
|
72
99
|
|
|
73
100
|
```jsx
|
|
74
101
|
<HStack gap={2}>
|
|
@@ -335,6 +362,7 @@ A full-width primary action with a compact secondary option.
|
|
|
335
362
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
336
363
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
337
364
|
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
365
|
+
| `progressCircleSize` | `number` | No | `24` | Size of the loading progress circle in px. |
|
|
338
366
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
339
367
|
| `right` | `string \| number` | No | `-` | - |
|
|
340
368
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
@@ -220,6 +220,7 @@ function MultipleCheckboxes() {
|
|
|
220
220
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
|
|
221
221
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
222
222
|
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `fgInverse` | Sets the checked/active color of the checkbox. |
|
|
223
|
+
| `controlSize` | `number` | No | `theme.controlSize.checkboxSize` | Sets the outer checkbox control size in pixels. |
|
|
223
224
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. |
|
|
224
225
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. |
|
|
225
226
|
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
@@ -116,6 +116,7 @@ function CustomCheckboxCellExample() {
|
|
|
116
116
|
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
117
117
|
| `contentStyle` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Apply animated styles to the inner container. |
|
|
118
118
|
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of the control. |
|
|
119
|
+
| `controlSize` | `number` | No | `-` | Sets the control size in pixels. |
|
|
119
120
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
120
121
|
| `debounceTime` | `number` | No | `500` | The amount of time to wait (in milliseconds) before invoking the debounced function. This prop is used in conjunction with the disableDebounce prop. The debounce function is configured to be invoked as soon as its called, but subsequent calls within the debounceTime period will be ignored. |
|
|
121
122
|
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
|
|
@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
38
38
|
|
|
39
39
|
| Prop | Type | Required | Default | Description |
|
|
40
40
|
| --- | --- | --- | --- | --- |
|
|
41
|
-
| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
|
|
41
|
+
| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
|
|
42
42
|
| `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
43
43
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
44
44
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -326,6 +326,7 @@ An icon button with a badge showing the notification count. Uses `DotCount` to d
|
|
|
326
326
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
327
327
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
328
328
|
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
329
|
+
| `progressCircleSize` | `number` | No | `24` | Size of the loading progress circle in px. |
|
|
329
330
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
330
331
|
| `right` | `string \| number` | No | `-` | - |
|
|
331
332
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
@@ -173,7 +173,7 @@ function LoadingExample() {
|
|
|
173
173
|
|
|
174
174
|
| Prop | Type | Required | Default | Description |
|
|
175
175
|
| --- | --- | --- | --- | --- |
|
|
176
|
-
| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean \| undefined; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
|
|
176
|
+
| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean \| undefined; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
|
|
177
177
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
178
178
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
179
179
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
@@ -255,7 +255,7 @@ function LoadingExample() {
|
|
|
255
255
|
| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
|
|
256
256
|
| `right` | `string \| number` | No | `-` | - |
|
|
257
257
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
258
|
-
| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
|
|
258
|
+
| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & AccessibilityProps & ComponentEventHandlerProps & Pick<PressableProps, style \| onPress \| hitSlop> & Omit<InteractableBaseProps, style \| pressed> & { noScaleOnPress?: boolean; onPressIn?: ((event: GestureResponderEvent) => void) \| undefined; onPressOut?: ((event: GestureResponderEvent) => void) \| undefined; feedback?: HapticFeedbackType \| undefined; loading?: boolean \| undefined; debounceTime?: number \| undefined; disableDebounce?: boolean \| undefined; } & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: end \| start \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & { onPress?: ((event: GestureResponderEvent) => void) \| null \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
|
|
259
259
|
| `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
260
260
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
261
261
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
@@ -81,7 +81,7 @@ function Example() {
|
|
|
81
81
|
| `onActionPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
|
|
82
82
|
| `onDismissPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
|
|
83
83
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | - |
|
|
84
|
-
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | If you pass a Pictogram name it will render a Pictogram to the right of the text content |
|
|
84
|
+
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | If you pass a Pictogram name it will render a Pictogram to the right of the text content |
|
|
85
85
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
86
86
|
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Text or ReactNode to be displayed above the description in a TextHeadline |
|
|
87
87
|
| `width` | `string \| number` | No | `327` | - |
|
|
@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
38
38
|
|
|
39
39
|
| Prop | Type | Required | Default | Description |
|
|
40
40
|
| --- | --- | --- | --- | --- |
|
|
41
|
-
| `name` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
|
|
41
|
+
| `name` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
|
|
42
42
|
| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
43
43
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
44
44
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -127,13 +127,13 @@ function Example() {
|
|
|
127
127
|
|
|
128
128
|
| Prop | Type | Required | Default | Description |
|
|
129
129
|
| --- | --- | --- | --- | --- |
|
|
130
|
-
| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
|
|
131
130
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
|
|
132
131
|
| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
|
|
133
132
|
| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
|
|
134
133
|
| `key` | `Key \| null` | No | `-` | - |
|
|
135
134
|
| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
|
|
136
135
|
| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
|
|
136
|
+
| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
|
|
137
137
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
138
138
|
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
139
139
|
| `styles` | `{ root?: StyleProp<ViewStyle>; progress?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBar component |
|
|
@@ -176,10 +176,10 @@ function Example() {
|
|
|
176
176
|
| Prop | Type | Required | Default | Description |
|
|
177
177
|
| --- | --- | --- | --- | --- |
|
|
178
178
|
| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
|
|
179
|
-
| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
|
|
180
179
|
| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
|
|
181
180
|
| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
|
|
182
181
|
| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
|
|
182
|
+
| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
|
|
183
183
|
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
184
184
|
| `styles` | `{ root?: StyleProp<ViewStyle>; labelContainer?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle>; }` | No | `-` | Custom styles for individual elements of the ProgressBarWithFloatLabel component |
|
|
185
185
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ProgressCircle
|
|
2
2
|
|
|
3
|
-
A circular visual indicator of completion progress.
|
|
3
|
+
A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
@@ -20,6 +20,65 @@ import { ProgressCircle } from '@coinbase/cds-mobile/visualizations/ProgressCirc
|
|
|
20
20
|
</HStack>
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
### Indeterminate
|
|
24
|
+
|
|
25
|
+
Use the `indeterminate` prop when progress is unknown (e.g. loading). The circle shows a spinning partial arc with no percentage text. This is the recommended replacement for the deprecated [Spinner](/components/feedback/Spinner) in loading contexts such as [IconButton](/components/buttons/IconButton) or button loading states.
|
|
26
|
+
|
|
27
|
+
When `indeterminate` is true, the default color is `fgMuted`; you can override `color` as needed. Always provide `accessibilityLabel` so screen readers announce the loading state.
|
|
28
|
+
|
|
29
|
+
#### Thickness (weight)
|
|
30
|
+
|
|
31
|
+
Indeterminate uses the same `weight` prop as determinate progress. The default is **`"normal"`** (4px stroke). Use `"thin"` (2px), `"semiheavy"` (8px), or `"heavy"` (12px) to change thickness.
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
<HStack gap={2} alignItems="center">
|
|
35
|
+
<VStack gap={1} alignItems="center">
|
|
36
|
+
<Text variant="label2">Default (normal)</Text>
|
|
37
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={64} />
|
|
38
|
+
</VStack>
|
|
39
|
+
<VStack gap={1} alignItems="center">
|
|
40
|
+
<Text variant="label2">weight="thin"</Text>
|
|
41
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="thin" />
|
|
42
|
+
</VStack>
|
|
43
|
+
<VStack gap={1} alignItems="center">
|
|
44
|
+
<Text variant="label2">weight="semiheavy"</Text>
|
|
45
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="semiheavy" />
|
|
46
|
+
</VStack>
|
|
47
|
+
</HStack>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
#### Progress (arc length)
|
|
51
|
+
|
|
52
|
+
When `indeterminate` is true, the **`progress` prop controls the length of the visible arc** (how much of the circle is drawn), not a completion percentage. It defaults to `0.75` (a 270° arc). Override it to change the arc length—e.g. `0.5` for a half circle or `0.25` for a shorter arc.
|
|
53
|
+
|
|
54
|
+
```jsx
|
|
55
|
+
<HStack gap={2} alignItems="center">
|
|
56
|
+
<VStack gap={1} alignItems="center">
|
|
57
|
+
<Text variant="label2">progress=0.25</Text>
|
|
58
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.25} size={56} />
|
|
59
|
+
</VStack>
|
|
60
|
+
<VStack gap={1} alignItems="center">
|
|
61
|
+
<Text variant="label2">progress=0.5</Text>
|
|
62
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.5} size={56} />
|
|
63
|
+
</VStack>
|
|
64
|
+
<VStack gap={1} alignItems="center">
|
|
65
|
+
<Text variant="label2">progress=0.75 (default)</Text>
|
|
66
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.75} size={56} />
|
|
67
|
+
</VStack>
|
|
68
|
+
</HStack>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### Sizes and color
|
|
72
|
+
|
|
73
|
+
```jsx
|
|
74
|
+
<HStack gap={2} alignItems="center">
|
|
75
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={32} />
|
|
76
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={56} />
|
|
77
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={100} />
|
|
78
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate color="bgPrimary" size={56} />
|
|
79
|
+
</HStack>
|
|
80
|
+
```
|
|
81
|
+
|
|
23
82
|
### Thin
|
|
24
83
|
|
|
25
84
|
```jsx
|
|
@@ -238,16 +297,17 @@ function Example() {
|
|
|
238
297
|
|
|
239
298
|
| Prop | Type | Required | Default | Description |
|
|
240
299
|
| --- | --- | --- | --- | --- |
|
|
241
|
-
| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
|
|
242
300
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
|
|
243
301
|
| `contentNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Optional component to override the default content rendered inside the circle. |
|
|
244
302
|
| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
|
|
245
303
|
| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
|
|
246
304
|
| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
|
|
247
305
|
| `hideText` | `boolean` | No | `-` | - |
|
|
306
|
+
| `indeterminate` | `boolean` | No | `-` | Toggle used to show an indeterminate progress circle. |
|
|
248
307
|
| `key` | `Key \| null` | No | `-` | - |
|
|
249
308
|
| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
|
|
250
309
|
| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
|
|
310
|
+
| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
|
|
251
311
|
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
252
312
|
| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
|
|
253
313
|
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
@@ -216,7 +216,9 @@ function AccessibleRadio() {
|
|
|
216
216
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
|
|
217
217
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `black` | - |
|
|
218
218
|
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of the radio. |
|
|
219
|
+
| `controlSize` | `number` | No | `theme.controlSize.radioSize` | Sets the outer radio control size in pixels. |
|
|
219
220
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. |
|
|
221
|
+
| `dotSize` | `number` | No | `2/3 of controlSize` | Sets the inner dot size in pixels. |
|
|
220
222
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Sets the elevation/drop shadow of the control. |
|
|
221
223
|
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
222
224
|
| `onChange` | `((value: RadioValue, checked?: boolean \| undefined) => void) \| undefined` | No | `-` | Toggle control selected state. |
|
|
@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
38
38
|
|
|
39
39
|
| Prop | Type | Required | Default | Description |
|
|
40
40
|
| --- | --- | --- | --- | --- |
|
|
41
|
-
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
41
|
+
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
42
42
|
| `dimension` | `96x96` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
43
43
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
44
44
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
- [Button](mobile/components/Button.txt): A pressable button element.
|
|
104
104
|
- [AvatarButton](mobile/components/AvatarButton.txt): A pressable Avatar.
|
|
105
105
|
- [Spinner](mobile/components/Spinner.txt): A loading indicator that displays a rotating animation to communicate that content is loading or a background process is in progress.
|
|
106
|
-
- [ProgressCircle](mobile/components/ProgressCircle.txt): A circular visual indicator of completion progress.
|
|
106
|
+
- [ProgressCircle](mobile/components/ProgressCircle.txt): A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
|
|
107
107
|
- [ProgressBarWithFloatLabel](mobile/components/ProgressBarWithFloatLabel.txt): A ProgressBar with a floating label that moves with progress.
|
|
108
108
|
- [ProgressBarWithFixedLabels](mobile/components/ProgressBarWithFixedLabels.txt): A ProgressBar with fixed labels at defined positions.
|
|
109
109
|
- [ProgressBar](mobile/components/ProgressBar.txt): A visual indicator of completion progress.
|
|
@@ -157,7 +157,7 @@ function AlertOnModalExample() {
|
|
|
157
157
|
| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
|
|
158
158
|
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
|
|
159
159
|
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
|
|
160
|
-
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
|
|
160
|
+
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
|
|
161
161
|
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
|
|
162
162
|
| `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
|
|
163
163
|
| `stacked` | `boolean` | No | `-` | Indicating if Alert is stacked on top of Modal |
|
|
@@ -71,7 +71,36 @@ Use transparent buttons for supplementary actions with lower prominence. The con
|
|
|
71
71
|
|
|
72
72
|
#### Loading
|
|
73
73
|
|
|
74
|
-
Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a
|
|
74
|
+
Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a loading indicator (indeterminate [ProgressCircle](/components/feedback/ProgressCircle)) while preserving its width.
|
|
75
|
+
|
|
76
|
+
##### Loading by variant
|
|
77
|
+
|
|
78
|
+
Loading works with all variants and transparent. The label is hidden and the progress circle is shown in the button’s accent color.
|
|
79
|
+
|
|
80
|
+
```jsx live
|
|
81
|
+
<HStack gap={2} flexWrap="wrap" alignItems="center">
|
|
82
|
+
<Button loading>Primary</Button>
|
|
83
|
+
<Button loading variant="secondary">
|
|
84
|
+
Secondary
|
|
85
|
+
</Button>
|
|
86
|
+
<Button loading variant="tertiary">
|
|
87
|
+
Tertiary
|
|
88
|
+
</Button>
|
|
89
|
+
<Button loading variant="negative">
|
|
90
|
+
Negative
|
|
91
|
+
</Button>
|
|
92
|
+
<Button loading transparent variant="secondary">
|
|
93
|
+
Transparent
|
|
94
|
+
</Button>
|
|
95
|
+
<Button loading compact>
|
|
96
|
+
Compact
|
|
97
|
+
</Button>
|
|
98
|
+
</HStack>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
##### Interactive loading
|
|
102
|
+
|
|
103
|
+
Toggle loading state to see the transition. Use for async actions like save or submit.
|
|
75
104
|
|
|
76
105
|
```jsx live
|
|
77
106
|
function LoadingExample() {
|
|
@@ -609,6 +638,7 @@ A full-width primary action with a compact secondary option.
|
|
|
609
638
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
610
639
|
| `prefix` | `string \| undefined` | No | `-` | - |
|
|
611
640
|
| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
|
|
641
|
+
| `progressCircleSize` | `number` | No | `24` | Size of the loading progress circle in px. |
|
|
612
642
|
| `property` | `string \| undefined` | No | `-` | - |
|
|
613
643
|
| `radioGroup` | `string \| undefined` | No | `-` | - |
|
|
614
644
|
| `ref` | `any` | No | `-` | - |
|
|
@@ -176,6 +176,7 @@ function MultipleCheckboxes() {
|
|
|
176
176
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
|
|
177
177
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
178
178
|
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `fgInverse` | Sets the checked/active color of the checkbox. |
|
|
179
|
+
| `controlSize` | `number` | No | `theme.controlSize.checkboxSize` | Sets the outer checkbox control size in pixels. |
|
|
179
180
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
180
181
|
| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
|
|
181
182
|
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
@@ -114,6 +114,7 @@ function CustomCheckboxCellExample() {
|
|
|
114
114
|
| `classNames` | `{ root?: string; checkboxContainer?: string \| undefined; title?: string \| undefined; description?: string \| undefined; contentContainer?: string \| undefined; } \| undefined` | No | `-` | - |
|
|
115
115
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
116
116
|
| `columnGap` | `((Space \| { base?: Space; phone?: Space \| undefined; tablet?: Space \| undefined; desktop?: Space \| undefined; }) & ResponsiveProp<Space>) \| undefined` | No | `-` | - |
|
|
117
|
+
| `controlSize` | `number` | No | `theme.controlSize.checkboxSize` | Sets the outer checkbox control size in pixels. |
|
|
117
118
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
118
119
|
| `description` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
|
|
119
120
|
| `descriptionId` | `string` | No | `-` | Custom ID for the description element. If not provided, a unique ID will be generated. |
|
|
@@ -60,7 +60,7 @@ function DefaultAlert() {
|
|
|
60
60
|
| `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
|
|
61
61
|
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
|
|
62
62
|
| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
|
|
63
|
-
| `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
|
|
63
|
+
| `heroSquare` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | No | `-` | Name of the illustration that is rendered in the alert |
|
|
64
64
|
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
|
|
65
65
|
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
|
|
66
66
|
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
|
|
@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
38
38
|
|
|
39
39
|
| Prop | Type | Required | Default | Description |
|
|
40
40
|
| --- | --- | --- | --- | --- |
|
|
41
|
-
| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
|
|
41
|
+
| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
|
|
42
42
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
43
43
|
| `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
44
44
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
@@ -102,7 +102,64 @@ Use the `transparent` prop to remove the background until the user interacts wit
|
|
|
102
102
|
|
|
103
103
|
#### Loading
|
|
104
104
|
|
|
105
|
-
Use the `loading` prop
|
|
105
|
+
Use the `loading` prop when an action is in progress. The button becomes non-interactive and shows an indeterminate [ProgressCircle](/components/feedback/ProgressCircle) instead of the icon. The circle size follows the button’s `iconSize`.
|
|
106
|
+
|
|
107
|
+
##### Loading by variant
|
|
108
|
+
|
|
109
|
+
Loading works with all variants, transparent, and compact. Provide `accessibilityLabel` so screen readers announce the loading state (e.g. "Loading").
|
|
110
|
+
|
|
111
|
+
```jsx live
|
|
112
|
+
<HStack gap={2} flexWrap="wrap" alignItems="center">
|
|
113
|
+
<IconButton
|
|
114
|
+
loading
|
|
115
|
+
name="refresh"
|
|
116
|
+
accessibilityLabel="Loading"
|
|
117
|
+
variant="primary"
|
|
118
|
+
onClick={console.log}
|
|
119
|
+
/>
|
|
120
|
+
<IconButton
|
|
121
|
+
loading
|
|
122
|
+
name="refresh"
|
|
123
|
+
accessibilityLabel="Loading"
|
|
124
|
+
variant="secondary"
|
|
125
|
+
onClick={console.log}
|
|
126
|
+
/>
|
|
127
|
+
<IconButton
|
|
128
|
+
loading
|
|
129
|
+
name="refresh"
|
|
130
|
+
accessibilityLabel="Loading"
|
|
131
|
+
variant="tertiary"
|
|
132
|
+
onClick={console.log}
|
|
133
|
+
/>
|
|
134
|
+
<IconButton
|
|
135
|
+
loading
|
|
136
|
+
name="refresh"
|
|
137
|
+
accessibilityLabel="Loading"
|
|
138
|
+
variant="foregroundMuted"
|
|
139
|
+
onClick={console.log}
|
|
140
|
+
/>
|
|
141
|
+
<IconButton
|
|
142
|
+
loading
|
|
143
|
+
transparent
|
|
144
|
+
name="refresh"
|
|
145
|
+
accessibilityLabel="Loading"
|
|
146
|
+
variant="secondary"
|
|
147
|
+
onClick={console.log}
|
|
148
|
+
/>
|
|
149
|
+
<IconButton loading compact name="refresh" accessibilityLabel="Loading" onClick={console.log} />
|
|
150
|
+
<IconButton
|
|
151
|
+
loading
|
|
152
|
+
name="refresh"
|
|
153
|
+
accessibilityLabel="Loading"
|
|
154
|
+
compact={false}
|
|
155
|
+
onClick={console.log}
|
|
156
|
+
/>
|
|
157
|
+
</HStack>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
##### Interactive loading
|
|
161
|
+
|
|
162
|
+
Toggle loading to simulate an async action. The button’s `accessibilityLabel` can reflect the state (e.g. "Submit form" vs "Processing submission").
|
|
106
163
|
|
|
107
164
|
```jsx live
|
|
108
165
|
function LoadingExample() {
|
|
@@ -143,7 +143,7 @@ function LoadingExample() {
|
|
|
143
143
|
|
|
144
144
|
| Prop | Type | Required | Default | Description |
|
|
145
145
|
| --- | --- | --- | --- | --- |
|
|
146
|
-
| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
|
|
146
|
+
| `primaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant \| undefined; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>>` | Yes | `-` | Primary action button |
|
|
147
147
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
148
148
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
149
149
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
@@ -230,7 +230,7 @@ function LoadingExample() {
|
|
|
230
230
|
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
231
231
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
232
232
|
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
233
|
-
| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant; disabled?: boolean \| undefined; loading?: boolean \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
|
|
233
|
+
| `secondaryAction` | `ReactElement<SharedProps & Pick<SharedAccessibilityProps, accessibilityLabel> & { variant?: ButtonVariant; disabled?: boolean \| undefined; loading?: boolean \| undefined; progressCircleSize?: number \| undefined; transparent?: boolean \| undefined; block?: boolean \| undefined; compact?: boolean \| undefined; children: ReactNode; start?: ReactNode; startIcon?: IconName \| undefined; startIconActive?: boolean \| undefined; end?: ReactNode; endIcon?: IconName \| undefined; endIconActive?: boolean \| undefined; flush?: start \| end \| undefined; name?: string \| undefined; noScaleOnPress?: boolean \| undefined; numberOfLines?: number \| undefined; } & Omit<PressableBaseProps, children \| testID \| accessibilityLabel \| transparent \| name \| block \| start \| end \| loading \| variant \| startIcon \| startIconActive \| numberOfLines \| disabled \| noScaleOnPress \| progressCircleSize \| compact \| endIcon \| endIconActive \| flush> & { onClick?: MouseEventHandler<Element> \| undefined; }, string \| JSXElementConstructor<any>> \| undefined` | No | `-` | Secondary action button |
|
|
234
234
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
235
235
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
236
236
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
@@ -159,7 +159,7 @@ function Example() {
|
|
|
159
159
|
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
160
160
|
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
161
161
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
162
|
-
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | If you pass a Pictogram name it will render a Pictogram to the right of the text content |
|
|
162
|
+
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | If you pass a Pictogram name it will render a Pictogram to the right of the text content |
|
|
163
163
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
164
164
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
165
165
|
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
38
38
|
|
|
39
39
|
| Prop | Type | Required | Default | Description |
|
|
40
40
|
| --- | --- | --- | --- | --- |
|
|
41
|
-
| `name` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
|
|
41
|
+
| `name` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | Yes | `-` | Name of illustration as defined in Figma |
|
|
42
42
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
43
43
|
| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
44
44
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
@@ -163,7 +163,6 @@ function Example() {
|
|
|
163
163
|
|
|
164
164
|
| Prop | Type | Required | Default | Description |
|
|
165
165
|
| --- | --- | --- | --- | --- |
|
|
166
|
-
| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
|
|
167
166
|
| `className` | `string` | No | `-` | - |
|
|
168
167
|
| `classNames` | `{ root?: string; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the ProgressBar component |
|
|
169
168
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
|
|
@@ -172,6 +171,7 @@ function Example() {
|
|
|
172
171
|
| `key` | `Key \| null` | No | `-` | - |
|
|
173
172
|
| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
|
|
174
173
|
| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
|
|
174
|
+
| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
|
|
175
175
|
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
176
176
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
177
177
|
| `styles` | `{ root?: CSSProperties; progress?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the ProgressBar component |
|
|
@@ -239,12 +239,12 @@ function Example() {
|
|
|
239
239
|
| Prop | Type | Required | Default | Description |
|
|
240
240
|
| --- | --- | --- | --- | --- |
|
|
241
241
|
| `label` | `number \| { value: number; render: (num: number, disabled?: boolean \| undefined) => ReactNode; }` | Yes | `-` | Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. |
|
|
242
|
-
| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
|
|
243
242
|
| `className` | `string` | No | `-` | - |
|
|
244
243
|
| `classNames` | `{ root?: string; labelContainer?: string \| undefined; label?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the ProgressBarWithFloatLabel component |
|
|
245
244
|
| `disableAnimateOnMount` | `boolean` | No | `false` | Disable animation on component mount |
|
|
246
245
|
| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
|
|
247
246
|
| `labelPlacement` | `above \| below` | No | `above` | Position of label relative to the bar |
|
|
247
|
+
| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
|
|
248
248
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
249
249
|
| `styles` | `{ root?: CSSProperties; labelContainer?: CSSProperties \| undefined; label?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for individual elements of the ProgressBarWithFloatLabel component |
|
|
250
250
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# ProgressCircle
|
|
2
2
|
|
|
3
|
-
A circular visual indicator of completion progress.
|
|
3
|
+
A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
@@ -20,6 +20,65 @@ import { ProgressCircle } from '@coinbase/cds-web/visualizations/ProgressCircle'
|
|
|
20
20
|
</HStack>
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
### Indeterminate
|
|
24
|
+
|
|
25
|
+
Use the `indeterminate` prop when progress is unknown (e.g. loading). The circle shows a spinning partial arc with no percentage text. This is the recommended replacement for the deprecated [Spinner](/components/feedback/Spinner) in loading contexts such as [IconButton](/components/inputs/IconButton) or button loading states.
|
|
26
|
+
|
|
27
|
+
When `indeterminate` is true, the default color is `fgMuted`; you can override `color` as needed. Always provide `accessibilityLabel` so screen readers announce the loading state.
|
|
28
|
+
|
|
29
|
+
#### Thickness (weight)
|
|
30
|
+
|
|
31
|
+
Indeterminate uses the same `weight` prop as determinate progress. The default is **`"normal"`** (4px stroke). Use `"thin"` (2px), `"semiheavy"` (8px), or `"heavy"` (12px) to change thickness.
|
|
32
|
+
|
|
33
|
+
```jsx live
|
|
34
|
+
<HStack gap={2} flexWrap="wrap" alignItems="center">
|
|
35
|
+
<VStack gap={1} alignItems="center">
|
|
36
|
+
<Text variant="label2">Default (normal)</Text>
|
|
37
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={64} />
|
|
38
|
+
</VStack>
|
|
39
|
+
<VStack gap={1} alignItems="center">
|
|
40
|
+
<Text variant="label2">weight="thin"</Text>
|
|
41
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="thin" />
|
|
42
|
+
</VStack>
|
|
43
|
+
<VStack gap={1} alignItems="center">
|
|
44
|
+
<Text variant="label2">weight="semiheavy"</Text>
|
|
45
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={64} weight="semiheavy" />
|
|
46
|
+
</VStack>
|
|
47
|
+
</HStack>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
#### Progress (arc length)
|
|
51
|
+
|
|
52
|
+
When `indeterminate` is true, the **`progress` prop controls the length of the visible arc** (how much of the circle is drawn), not a completion percentage. It defaults to `0.75` (a 270° arc). Override it to change the arc length—e.g. `0.5` for a half circle or `0.25` for a shorter arc.
|
|
53
|
+
|
|
54
|
+
```jsx live
|
|
55
|
+
<HStack gap={2} flexWrap="wrap" alignItems="center">
|
|
56
|
+
<VStack gap={1} alignItems="center">
|
|
57
|
+
<Text variant="label2">progress=0.25</Text>
|
|
58
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.25} size={56} />
|
|
59
|
+
</VStack>
|
|
60
|
+
<VStack gap={1} alignItems="center">
|
|
61
|
+
<Text variant="label2">progress=0.5</Text>
|
|
62
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.5} size={56} />
|
|
63
|
+
</VStack>
|
|
64
|
+
<VStack gap={1} alignItems="center">
|
|
65
|
+
<Text variant="label2">progress=0.75 (default)</Text>
|
|
66
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate progress={0.75} size={56} />
|
|
67
|
+
</VStack>
|
|
68
|
+
</HStack>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### Sizes and color
|
|
72
|
+
|
|
73
|
+
```jsx live
|
|
74
|
+
<HStack gap={2} flexWrap="wrap" alignItems="center">
|
|
75
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={32} />
|
|
76
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={56} />
|
|
77
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate size={100} />
|
|
78
|
+
<ProgressCircle accessibilityLabel="Loading" indeterminate color="bgPrimary" size={56} />
|
|
79
|
+
</HStack>
|
|
80
|
+
```
|
|
81
|
+
|
|
23
82
|
### Thin
|
|
24
83
|
|
|
25
84
|
```jsx live
|
|
@@ -447,7 +506,6 @@ function Example() {
|
|
|
447
506
|
|
|
448
507
|
| Prop | Type | Required | Default | Description |
|
|
449
508
|
| --- | --- | --- | --- | --- |
|
|
450
|
-
| `progress` | `number` | Yes | `-` | Number between 0-1 representing the progress percentage |
|
|
451
509
|
| `className` | `string` | No | `-` | - |
|
|
452
510
|
| `classNames` | `{ root?: string; svg?: string \| undefined; circle?: string \| undefined; progress?: string \| undefined; } \| undefined` | No | `-` | Custom class names for individual elements of the ProgressCircle component |
|
|
453
511
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `primary` | Custom progress color. |
|
|
@@ -456,9 +514,11 @@ function Example() {
|
|
|
456
514
|
| `disabled` | `boolean` | No | `-` | Toggle used to show a disabled progress visualization |
|
|
457
515
|
| `hideContent` | `boolean` | No | `-` | Toggle used to hide the content node rendered inside the circle. |
|
|
458
516
|
| `hideText` | `boolean` | No | `-` | - |
|
|
517
|
+
| `indeterminate` | `boolean` | No | `-` | Toggle used to show an indeterminate progress circle. |
|
|
459
518
|
| `key` | `Key \| null` | No | `-` | - |
|
|
460
519
|
| `onAnimationEnd` | `(() => void)` | No | `-` | Callback fired when the progress animation ends. |
|
|
461
520
|
| `onAnimationStart` | `(() => void)` | No | `-` | Callback fired when the progress animation starts. |
|
|
521
|
+
| `progress` | `number` | No | `-` | Number between 0-1 representing the progress percentage |
|
|
462
522
|
| `ref` | `RefObject<HTMLDivElement> \| ((instance: HTMLDivElement \| null) => void) \| null` | No | `-` | - |
|
|
463
523
|
| `size` | `number` | No | `-` | Optional size in px for the visualization. This is useful if the visualization is used in an HStack. If this is omitted the visualization will fill the parent width or height. Since its a circular visualization it will fill the smaller of the parent width or height |
|
|
464
524
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
@@ -207,6 +207,8 @@ function CustomStyledRadio() {
|
|
|
207
207
|
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label for the control option. |
|
|
208
208
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `black` | - |
|
|
209
209
|
| `controlColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `bgPrimary` | Sets the checked/active color of the radio. |
|
|
210
|
+
| `controlSize` | `number` | No | `theme.controlSize.radioSize` | Sets the outer radio control size in pixels. |
|
|
211
|
+
| `dotSize` | `number` | No | `2/3 of controlSize` | Sets the inner dot size in pixels. |
|
|
210
212
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
211
213
|
| `iconStyle` | `CSSProperties` | No | `-` | Style for the icon element |
|
|
212
214
|
| `indeterminate` | `boolean` | No | `-` | Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. |
|
|
@@ -38,7 +38,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
38
38
|
|
|
39
39
|
| Prop | Type | Required | Default | Description |
|
|
40
40
|
| --- | --- | --- | --- | --- |
|
|
41
|
-
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
41
|
+
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
42
42
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
43
43
|
| `dimension` | `96x96` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
44
44
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
@@ -383,7 +383,7 @@ import { TileButton } from '@coinbase/cds-web/buttons/TileButton'
|
|
|
383
383
|
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
384
384
|
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
385
385
|
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
386
|
-
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Name of illustration as defined in Figma |
|
|
386
|
+
| `pictogram` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Name of illustration as defined in Figma |
|
|
387
387
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
388
388
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
389
389
|
| `prefix` | `string \| undefined` | No | `-` | - |
|
package/mcp-docs/web/routes.txt
CHANGED
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
- [Button](web/components/Button.txt): A pressable button element.
|
|
115
115
|
- [AvatarButton](web/components/AvatarButton.txt): A pressable Avatar.
|
|
116
116
|
- [Spinner](web/components/Spinner.txt): A loading indicator that displays a rotating animation to communicate that content is loading or a background process is in progress.
|
|
117
|
-
- [ProgressCircle](web/components/ProgressCircle.txt): A circular visual indicator of completion progress.
|
|
117
|
+
- [ProgressCircle](web/components/ProgressCircle.txt): A circular visual indicator of completion progress. Supports both determinate progress (0–100%) and an indeterminate variant for loading states.
|
|
118
118
|
- [ProgressBarWithFloatLabel](web/components/ProgressBarWithFloatLabel.txt): A ProgressBar with a floating label that moves with progress.
|
|
119
119
|
- [ProgressBarWithFixedLabels](web/components/ProgressBarWithFixedLabels.txt): A ProgressBar with fixed labels at defined positions.
|
|
120
120
|
- [ProgressBar](web/components/ProgressBar.txt): A visual indicator of completion progress.
|