@coinbase/cds-mcp-server 8.28.1 → 8.29.0

package/mcp-docs/web/components/IconButton.txt

@@ -10,204 +10,99 @@ import { IconButton } from '@coinbase/cds-web/buttons/IconButton'
 
 ## Examples
 
-Icon buttons must have a name (which determines the icon), and can use variants to denote intent and importance.
+IconButton is a compact button that displays only an icon. Use it for actions where the icon alone clearly communicates the purpose.
 
-:::tip Accessibility tip
+### Basics
 
-To ensure your `IconButton` implementation is accessible, it must have an `accessibilityLabel` that describes the purpose of the button.
-
-<br />
-
-In cases where you're composing a button next to a label or some text that describes the buttons
-action, you can setup your system using `accessibilityLabelledBy` prop mapping to the `id` on the
-label node (See [Composed example](#composed-example)).
-
-:::
+The only required props are `name` (which determines the icon) and `accessibilityLabel` (for screen readers).
 
 ```jsx live
-<VStack gap={4}>
-  <VStack gap={2}>
-    <Text font="title3">Basic variants</Text>
-    <HStack gap={2}>
-      <IconButton
-        active
-        name="orderHistory"
-        accessibilityLabel="View transaction history"
-        variant="primary"
-        onClick={console.log}
-      />
-      <IconButton
-        active
-        name="gear"
-        accessibilityLabel="View settings"
-        variant="secondary"
-        onClick={console.log}
-      />
-      <IconButton
-        name="phone"
-        accessibilityLabel="View settings"
-        variant="tertiary"
-        onClick={console.log}
-      />
-      <IconButton
-        name="checkmark"
-        accessibilityLabel="Approve transaction"
-        variant="foregroundMuted"
-        onClick={console.log}
-      />
-    </HStack>
-  </VStack>
+<HStack gap={2} flexWrap="wrap">
+  <IconButton name="gear" accessibilityLabel="Open settings" onClick={console.log} />
+  <IconButton name="close" accessibilityLabel="Close modal" onClick={console.log} />
+  <IconButton name="refresh" accessibilityLabel="Refresh data" onClick={console.log} />
+</HStack>
+```
 
-  <VStack gap={2}>
-    <Text font="title3">Transparent variants</Text>
-    <HStack gap={2}>
-      <IconButton
-        active
-        name="orderHistory"
-        accessibilityLabel="View past order history"
-        variant="primary"
-        transparent
-        onClick={console.log}
-      />
-      <IconButton
-        name="phone"
-        accessibilityLabel="View settings"
-        variant="tertiary"
-        transparent
-        onClick={console.log}
-      />
-      <IconButton
-        active
-        name="gear"
-        accessibilityLabel="Update settings"
-        variant="secondary"
-        transparent
-        onClick={console.log}
-      />
-      <IconButton
-        name="checkmark"
-        accessibilityLabel="Verify your identity"
-        variant="foregroundMuted"
-        transparent
-        onClick={console.log}
-      />
-    </HStack>
-  </VStack>
+### Variants
 
-  <VStack gap={2}>
-    <Text font="title3">Loading states</Text>
-    <HStack gap={2}>
-      <IconButton
-        active
-        name="orderHistory"
-        accessibilityLabel="Loading transaction history"
-        variant="primary"
-        loading
-        onClick={console.log}
-      />
-      <IconButton
-        active
-        name="gear"
-        accessibilityLabel="Loading settings"
-        variant="secondary"
-        loading
-        onClick={console.log}
-      />
-      <IconButton
-        name="checkmark"
-        accessibilityLabel="Processing approval"
-        variant="foregroundMuted"
-        loading
-        onClick={console.log}
-      />
-    </HStack>
-  </VStack>
-
-  <VStack gap={2}>
-    <Text font="title3">Disabled states</Text>
-    <HStack gap={2}>
-      <IconButton
-        active
-        name="orderHistory"
-        accessibilityLabel="View transaction history"
-        variant="primary"
-        disabled
-        onClick={console.log}
-      />
-      <IconButton
-        active
-        name="gear"
-        accessibilityLabel="View settings"
-        variant="secondary"
-        disabled
-        onClick={console.log}
-      />
-      <IconButton
-        name="checkmark"
-        accessibilityLabel="Approve transaction"
-        variant="foregroundMuted"
-        disabled
-        onClick={console.log}
-      />
-    </HStack>
-  </VStack>
+Use variants to denote intent and importance. The `active` prop fills the icon when enabled.
 
-  <VStack gap={2}>
-    <Text font="title3">Sizing</Text>
-    <HStack gap={2} alignItems="center">
-      <IconButton
-        active
-        name="gear"
-        accessibilityLabel="Settings - compact"
-        variant="primary"
-        compact
-        onClick={console.log}
-      />
-      <IconButton
-        active
-        name="gear"
-        accessibilityLabel="Settings - regular"
-        variant="primary"
-        compact={false}
-        onClick={console.log}
-      />
-    </HStack>
-  </VStack>
-</VStack>
+```jsx live
+<HStack gap={2} flexWrap="wrap">
+  <IconButton
+    active
+    name="orderHistory"
+    accessibilityLabel="View transaction history"
+    variant="primary"
+    onClick={console.log}
+  />
+  <IconButton
+    active
+    name="gear"
+    accessibilityLabel="View settings"
+    variant="secondary"
+    onClick={console.log}
+  />
+  <IconButton
+    name="phone"
+    accessibilityLabel="Call support"
+    variant="tertiary"
+    onClick={console.log}
+  />
+  <IconButton
+    name="checkmark"
+    accessibilityLabel="Approve transaction"
+    variant="foregroundMuted"
+    onClick={console.log}
+  />
+</HStack>
 ```
 
-### Composed example
+#### Transparent
 
-As referenced above, if you're building a composed system, use the `accessibilityLabelledBy` prop and an `id` on the text node.
+Use the `transparent` prop to remove the background until the user interacts with the button.
 
 ```jsx live
-function composedExample() {
-  const [active, setActive] = useState(false);
-  const name = useMemo(() => (active ? 'dropsActive' : 'dropsInactive'), [active]);
-  const variant = useMemo(() => (active ? 'primary' : 'foregroundMuted'), [active]);
-  const label = useMemo(() => (active ? 'Reject drop' : 'Claim drop'), [active]);
-
-  return (
-    <HStack gap={2} alignItems="center">
-      <IconButton
-        name={name}
-        variant={variant}
-        onClick={() => setActive((active) => !active)}
-        // Accessibility props
-        id="my-icon--id"
-        accessibilityLabelledBy="my-label--id"
-      />
-      <Text font="label1" as="label" htmlFor="my-icon--id" id="my-label--id">
-        {label}
-      </Text>
-    </HStack>
-  );
-}
+<HStack gap={2} flexWrap="wrap">
+  <IconButton
+    active
+    name="orderHistory"
+    accessibilityLabel="View past order history"
+    variant="primary"
+    transparent
+    onClick={console.log}
+  />
+  <IconButton
+    active
+    name="gear"
+    accessibilityLabel="Update settings"
+    variant="secondary"
+    transparent
+    onClick={console.log}
+  />
+  <IconButton
+    name="phone"
+    accessibilityLabel="Call support"
+    variant="tertiary"
+    transparent
+    onClick={console.log}
+  />
+  <IconButton
+    name="checkmark"
+    accessibilityLabel="Verify your identity"
+    variant="foregroundMuted"
+    transparent
+    onClick={console.log}
+  />
+</HStack>
 ```
 
-### Loading state
+### States
+
+#### Loading
 
-Use the `loading` prop to show a spinner when an action is in progress. The button becomes non-interactive and shows a loading spinner instead of the icon.
+Use the `loading` prop to show a spinner when an action is in progress. The button becomes non-interactive and displays a loading spinner instead of the icon.
 
 ```jsx live
 function LoadingExample() {
@@ -215,12 +110,11 @@ function LoadingExample() {
 
   const handleSubmit = () => {
     setIsLoading(true);
-    // Simulate async operation
     setTimeout(() => setIsLoading(false), 2000);
   };
 
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
       <IconButton
         name="checkmark"
         accessibilityLabel={isLoading ? 'Processing submission' : 'Submit form'}
@@ -240,18 +134,51 @@ function LoadingExample() {
 }
 ```
 
+#### Disabled
+
+Use the `disabled` prop to prevent interaction and show a disabled visual state.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap">
+  <IconButton
+    active
+    name="orderHistory"
+    accessibilityLabel="View transaction history"
+    variant="primary"
+    disabled
+    onClick={console.log}
+  />
+  <IconButton
+    active
+    name="gear"
+    accessibilityLabel="View settings"
+    variant="secondary"
+    disabled
+    onClick={console.log}
+  />
+  <IconButton
+    name="checkmark"
+    accessibilityLabel="Approve transaction"
+    variant="foregroundMuted"
+    disabled
+    onClick={console.log}
+  />
+</HStack>
+```
+
 ### Sizing
 
-IconButtons come in two sizes: compact (default) and regular. Use `compact={false}` for larger touch targets.
+IconButtons are compact by default. Use `compact={false}` for larger touch targets.
 
 ```jsx live
-<HStack gap={2} alignItems="center">
+<HStack gap={2} flexWrap="wrap" alignItems="center">
   <IconButton
     active
     name="gear"
     accessibilityLabel="Settings - compact"
     variant="primary"
     compact
+    onClick={console.log}
   />
   <IconButton
     active
@@ -259,18 +186,66 @@ IconButtons come in two sizes: compact (default) and regular. Use `compact={fals
     accessibilityLabel="Settings - regular"
     variant="primary"
     compact={false}
+    onClick={console.log}
   />
 </HStack>
 ```
 
-### A11y
+### Accessibility
 
-Since icon buttons have no descriptive text or children, an accessibility label must be provided.
+Since icon buttons have no visible text, an `accessibilityLabel` is required to describe the button's purpose for screen readers.
 
 ```jsx
 <IconButton name="close" accessibilityLabel="Close trade modal" />
 ```
 
+When composing a button with a visible label, use `accessibilityLabelledBy` to reference the label's `id` instead. See the [Claim Drop example](#claim-drop) below.
+
+### Composed Examples
+
+#### Claim Drop
+
+A toggleable icon button with an adjacent label. Uses `accessibilityLabelledBy` to associate the button with its visible label.
+
+```jsx live
+function ClaimDropExample() {
+  const [active, setActive] = useState(false);
+  const variant = useMemo(() => (active ? 'primary' : 'foregroundMuted'), [active]);
+  const label = useMemo(() => (active ? 'Reject drop' : 'Claim drop'), [active]);
+
+  return (
+    <HStack gap={2} alignItems="center">
+      <IconButton
+        name="drops"
+        active={active}
+        variant={variant}
+        onClick={() => setActive((active) => !active)}
+        id="claim-drop-button"
+        accessibilityLabelledBy="claim-drop-label"
+      />
+      <Text font="label1" as="label" htmlFor="claim-drop-button" id="claim-drop-label">
+        {label}
+      </Text>
+    </HStack>
+  );
+}
+```
+
+#### Notification Bell
+
+An icon button with a badge showing the notification count. Uses `DotCount` to display the number of unread notifications.
+
+```jsx live
+<DotCount count={3} overlap="circular" pin="top-end">
+  <IconButton
+    name="bell"
+    accessibilityLabel="Notifications, 3 unread"
+    variant="secondary"
+    onClick={console.log}
+  />
+</DotCount>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

package/mcp-docs/web/components/LineChart.txt

@@ -1268,14 +1268,15 @@ function AssetPriceWithDottedArea() {
           <SegmentedTab
             ref={ref}
             label={
-              <TextLabel1
+              <Text
+                font="label1"
                 style={{
                   transition: 'color 0.2s ease',
                   color: isActive ? assets.btc.color : undefined,
                 }}
               >
                 {label}
-              </TextLabel1>
+              </Text>
             }
             {...props}
           />

package/mcp-docs/web/components/MultiContentModule.txt

@@ -215,9 +215,9 @@ function Example() {
       <VStack>
         <HStack justifyContent="center" zIndex={1}>
           <Box background="background" paddingHorizontal={1.5}>
-            <TextBody as="span" color="foregroundMuted">
+            <Text as="span" font="body" color="foregroundMuted">
               OR
-            </TextBody>
+            </Text>
           </Box>
         </HStack>
         <Divider marginTop={-1.5} paddingBottom={1.5} />
@@ -235,9 +235,9 @@ function Example() {
             >
               <Box padding={2}>{icon}</Box>
             </Pressable>
-            <TextLabel2 as="span" color="foregroundMuted" paddingTop={1}>
+            <Text as="span" font="label2" color="foregroundMuted" paddingTop={1}>
               {name}
-            </TextLabel2>
+            </Text>
           </VStack>
         ))}
       </HStack>
@@ -251,13 +251,13 @@ function Example() {
         actionAccessibilityLabel="Continue"
         title="Sign in to Coinbase"
         description={
-          <TextBody as="p" color="foregroundMuted">
+          <Text as="p" font="body" color="foregroundMuted">
             By signing in, you agree to our{' '}
             <Link to="https://www.google.com/" openInNewWindow underline={false}>
               Privacy Policy
             </Link>
             . Not your device? Use a private window.
-          </TextBody>
+          </Text>
         }
         accessibilityLabel="Login section"
         pictogram={<LogoMark size={32} />}

package/mcp-docs/web/components/PageHeader.txt

@@ -85,17 +85,17 @@ function Example() {
       />
       <Box padding={3} background="bgPositiveWash">
         <VStack gap={3} background="bgPrimaryWash">
-          <TextTitle2>Configure Your Trading Preferences</TextTitle2>
-          <TextBody>
+          <Text font="title2">Configure Your Trading Preferences</Text>
+          <Text font="body">
             Customize your trading experience by adjusting the settings below. These preferences
             will apply to all your trading activities and can be modified at any time.
-          </TextBody>
-          <TextTitle4>Order Types</TextTitle4>
-          <TextBody color="fgSecondary">
+          </Text>
+          <Text font="title4">Order Types</Text>
+          <Text font="body" color="fgSecondary">
             Choose your preferred default order types for buying and selling. Market orders execute
             immediately at current prices, while limit orders allow you to set specific price
             targets.
-          </TextBody>
+          </Text>
         </VStack>
       </Box>
     </>
@@ -123,10 +123,12 @@ function Example() {
           paddingY={10}
         >
           <HeroSquare name="bigWarning" />
-          <TextTitle1 as="h3">You need to X before you Y</TextTitle1>
-          <TextBody align="center" as="sub">
+          <Text as="h3" font="title1">
+            You need to X before you Y
+          </Text>
+          <Text font="body" align="center" as="sub">
             You&apos;ll need to [add funds] before you can [complete this transaction]
-          </TextBody>
+          </Text>
         </VStack>
       </Box>
     </VStack>

package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt

@@ -63,17 +63,17 @@ function Example() {
 
   const renderStartLabelNum = useCallback((num, disabled) => {
     return (
-      <TextTitle3 disabled={disabled} as="span">
+      <Text disabled={disabled} as="span" font="title3">
         ${num.toLocaleString()}
-      </TextTitle3>
+      </Text>
     );
   }, []);
 
   const renderEndLabelNum = useCallback((num, disabled) => {
     return (
-      <TextLabel2 disabled={disabled} as="span" align="end" noWrap>
+      <Text disabled={disabled} as="span" font="label2" align="end" noWrap>
         ${num.toLocaleString()} left
-      </TextLabel2>
+      </Text>
     );
   }, []);
 

package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt

@@ -56,9 +56,9 @@ function Example() {
 
   const renderLabelNum = useCallback((num, disabled) => {
     return (
-      <TextTitle3 as="span" disabled={disabled}>
+      <Text as="span" font="title3" disabled={disabled}>
         ${num.toLocaleString()}
-      </TextTitle3>
+      </Text>
     );
   }, []);
 

package/mcp-docs/web/components/ProgressCircle.txt

@@ -351,7 +351,11 @@ The progress circle can be customized with styles and class names.
         stroke: 'transparent',
       },
     }}
-    contentNode={<TextTitle1 color="fgPrimary">40%</TextTitle1>}
+    contentNode={
+      <Text font="title1" color="fgPrimary">
+        40%
+      </Text>
+    }
     weight="semiheavy"
   />
   <ProgressCircle

package/mcp-docs/web/components/SelectChipAlpha.txt

@@ -349,6 +349,6 @@ function ExampleDisabled() {
 | `style` | `CSSProperties` | No | `-` | Inline styles for the root element |
 | `styles` | `{ root?: CSSProperties; control?: CSSProperties \| undefined; controlStartNode?: CSSProperties \| undefined; controlInputNode?: CSSProperties \| undefined; controlValueNode?: CSSProperties \| undefined; controlLabelNode?: CSSProperties \| undefined; controlHelperTextNode?: CSSProperties \| undefined; controlEndNode?: CSSProperties \| undefined; controlBlendStyles?: InteractableBlendStyles \| undefined; dropdown?: CSSProperties \| undefined; option?: CSSProperties \| undefined; optionCell?: CSSProperties \| undefined; optionContent?: CSSProperties \| undefined; optionLabel?: CSSProperties \| undefined; optionDescription?: CSSProperties \| undefined; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: CSSProperties \| undefined; emptyContentsContainer?: CSSProperties \| undefined; emptyContentsText?: CSSProperties \| undefined; optionGroup?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for different parts of the select |
 | `testID` | `string` | No | `-` | Test ID for the root element |
-| `type` | `single \| multi` | No | `-` | Whether the select allows single or multiple selections |
+| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
 
 

package/mcp-docs/web/components/Sidebar.txt

@@ -57,9 +57,9 @@ function Example() {
           testID="sidebar-item-primary"
         >
           <Icon name="documentation" />
-          <TextHeadline as="span" color="foreground">
+          <Text as="span" font="headline" color="foreground">
             End item
-          </TextHeadline>
+          </Text>
         </HStack>
       </Pressable>
     );

package/mcp-docs/web/components/Sparkline.txt

@@ -76,7 +76,9 @@ function Example() {
   const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
   return (
     <VStack gap={2}>
-      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <Text as="p" font="label1">
+        Scale {yAxisScalingFactor}
+      </Text>
       <Sparkline {...dimensions} path={path} color="auto" yAxisScalingFactor={yAxisScalingFactor} />
     </VStack>
   );

package/mcp-docs/web/components/SparklineGradient.txt

@@ -55,7 +55,9 @@ function Example() {
   const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
   return (
     <VStack gap={2}>
-      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
+      <Text as="p" font="label1">
+        Scale {yAxisScalingFactor}
+      </Text>
       <SparklineGradient
         {...dimensions}
         path={path}

package/mcp-docs/web/components/SparklineInteractiveHeader.txt

@@ -55,7 +55,9 @@ The fill will be added by default
     labelNode={
       <HStack gap={1} alignItems="center">
         <Icon active name="wallet" size="s" />
-        <TextTitle3 as="span">CustomHeader</TextTitle3>
+        <Text as="span" font="title3">
+          CustomHeader
+        </Text>
       </HStack>
     }
   />

package/mcp-docs/web/components/TabbedChips.txt

@@ -36,7 +36,9 @@ function TabbedChipsExample() {
   return (
     <VStack maxWidth={375} borderRadius={400} bordered paddingX={3} gap={2} paddingY={3}>
       <VStack paddingTop={1}>
-        <TextTitle3 as="p">Popular assets</TextTitle3>
+        <Text as="p" font="title3">
+          Popular assets
+        </Text>
       </VStack>
       <SearchInput compact placeholder="Search by name" />
       <OldTabbedChips value={value} onChange={setValue} tabs={tabs} />

package/mcp-docs/web/components/TableBody.txt

@@ -40,9 +40,9 @@ import { TableBody } from '@coinbase/cds-web/tables/TableBody'
     <TableRow>
       <TableCell height={320} alignItems="center" justifyContent="center">
         <Spinner size={4} color="primary" />
-        <TextHeadline as="p" spacingTop={2} color="foregroundMuted">
+        <Text as="p" font="headline" spacingTop={2} color="foregroundMuted">
           Loading content...
-        </TextHeadline>
+        </Text>
       </TableCell>
     </TableRow>
   </TableBody>

package/mcp-docs/web/components/TableCaption.txt

@@ -36,9 +36,9 @@ import { TableCaption } from '@coinbase/cds-web/tables/TableCaption'
 <Table bordered>
   <TableCaption>
     <VStack gap={1}>
-      <TextTitle2 as="h2" color="primary">
+      <Text as="h2" font="title2" color="primary">
         Project Team
-      </TextTitle2>
+      </Text>
       <Text as="p" color="foregroundMuted">
         Updated as of March 2024
       </Text>