@coinbase/cds-mcp-server 8.28.1 → 8.29.0

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

@@ -26,10 +26,10 @@ The global warning banner is used to communicate important alerts or warnings to
   primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
   secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
 >
-  <TextLabel2 as="p">
+  <Text as="p" font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -47,10 +47,10 @@ The In-line Error Banner is used to display specific error messages directly ben
   primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
   secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
 >
-  <TextLabel2 as="p">
+  <Text as="p" font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -66,10 +66,10 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
   title="Some features are temporarily unavailable"
   variant="promotional"
 >
-  <TextLabel2 as="p">
+  <Text as="p" font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -88,10 +88,10 @@ The in-line Informational Banner is used to provide users with additional inform
     primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
     secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       Your funds are safe. We’re looking into it and expect our usual service to return soon.
       <Link to="https://www.coinbase.com">Learn more</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     startIcon="warning"
@@ -100,9 +100,9 @@ The in-line Informational Banner is used to provide users with additional inform
     title="Some features are temporarily unavailable"
     variant="warning"
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       <Link to="https://www.coinbase.com">Retry</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```
@@ -121,9 +121,9 @@ You can customize `borderRadius` to soften contextual and in-line banners.
     title="Rounded contextual banner"
     variant="informational"
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       Rounded corners help align with softer surface treatments within a page section.
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     borderRadius={400}
@@ -135,9 +135,9 @@ You can customize `borderRadius` to soften contextual and in-line banners.
     title="Rounded inline banner"
     variant="promotional"
   >
-    <TextLabel2 as="p">
+    <Text as="p" font="label2">
       You can incrementally increase the radius to match surrounding cards or panels.
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```

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

@@ -10,82 +10,236 @@ import { Button } from '@coinbase/cds-web/buttons/Button'
 
 ## Examples
 
-### Primary Button
+Buttons allow users to take actions and make choices with a single tap. They communicate what action will occur when the user interacts with them.
 
-Use primary buttons for high emphasis actions. These buttons have the most visual impact and should be reserved for the most important, final actions that complete a flow, like Save, Join now, or Confirm. Try to use one per screen. Multiple primary buttons make it confusing for the user to understand what action they should take.
+### Basics
+
+The only required prop is `children`, which is the button's label. Buttons default to the `primary` variant.
 
 ```jsx live
-<Button onClick={console.log} variant="primary">
-  Primary
-</Button>
+<Button onClick={console.log}>Get started</Button>
 ```
 
-### Secondary Button
+### Variants
+
+Use variants to communicate the importance and intent of an action.
 
-These buttons have a medium level of emphasis that should be used for non-critical actions. Secondary buttons can be used on pages without restrictions and works well for multiple actions of equal weight. They can be used in conjunction with a Primary Button or independently.
+- **Primary** — High emphasis for main actions like "Save" or "Confirm". Limit to one per screen.
+- **Secondary** — Medium emphasis for multiple actions of equal weight.
+- **Tertiary** — High contrast with inverted background.
+- **Negative** — Destructive actions that can't be undone. Use sparingly.
 
 ```jsx live
-<Button onClick={console.log} variant="secondary">
-  Secondary
-</Button>
+<HStack gap={2} flexWrap="wrap">
+  <Button onClick={console.log} variant="primary">
+    Primary
+  </Button>
+  <Button onClick={console.log} variant="secondary">
+    Secondary
+  </Button>
+  <Button onClick={console.log} variant="tertiary">
+    Tertiary
+  </Button>
+  <Button onClick={console.log} variant="negative">
+    Negative
+  </Button>
+</HStack>
 ```
 
-### Tertiary Button
+#### Transparent
 
-These buttons provide high contrast with the background through the use of the themable inverted background color.
+Use transparent buttons for supplementary actions with lower prominence. The container is only visible on interaction. Works with any variant.
 
 ```jsx live
-<Button onClick={console.log} variant="tertiary">
-  Tertiary
-</Button>
+<HStack gap={2} flexWrap="wrap">
+  <Button onClick={console.log} transparent>
+    Primary
+  </Button>
+  <Button onClick={console.log} variant="secondary" transparent>
+    Secondary
+  </Button>
+  <Button onClick={console.log} variant="tertiary" transparent>
+    Tertiary
+  </Button>
+  <Button onClick={console.log} variant="negative" transparent>
+    Negative
+  </Button>
+</HStack>
 ```
 
-### Negative Button
+### States
+
+#### Loading
 
-Negative buttons should be used sparingly for destructive actions that will result in data loss, can’t be undone, or will have significant consequences. They commonly appear in confirmation dialogs as the final confirmation before deleting.
+Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a spinner while preserving its width.
 
 ```jsx live
-<Button onClick={console.log} variant="negative">
-  Negative
-</Button>
+function LoadingExample() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 2000);
+  };
+
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <Button onClick={handleClick} loading={isLoading}>
+        Save changes
+      </Button>
+      <Button onClick={handleClick} variant="secondary" loading={isLoading}>
+        Submit
+      </Button>
+    </HStack>
+  );
+}
 ```
 
-### Transparent Button
+#### Disabled
 
-Transparent buttons are used for less important actions that are supplementary. These buttons have lower prominence since its container is not visible until the button is interacted with. Transparent buttons are frequently used on Cards and can be placed on a variety of backgrounds.
+Use the `disabled` prop to prevent interaction and indicate the action is unavailable.
 
 ```jsx live
-<HStack gap={2}>
-  <Button onClick={console.log} transparent>
+<HStack gap={2} flexWrap="wrap">
+  <Button disabled onClick={console.log}>
     Primary
   </Button>
-  <Button onClick={console.log} variant="secondary" transparent>
-    Secondary
-  </Button>
-  <Button onClick={console.log} variant="tertiary" transparent>
+  <Button disabled onClick={console.log} variant="secondary">
     Secondary
   </Button>
-  <Button onClick={console.log} variant="negative" transparent>
+  <Button disabled onClick={console.log} variant="negative">
     Negative
   </Button>
 </HStack>
 ```
 
-### Buttons with end icon
+### Sizing
+
+#### Compact
+
+Use `compact` for smaller buttons with reduced padding. Useful in dense UIs or alongside other compact elements.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" alignItems="center">
+  <Button onClick={console.log} compact>
+    Compact
+  </Button>
+  <Button onClick={console.log}>Default</Button>
+</HStack>
+```
+
+#### Block
 
-You can add an icon after the label of a button.
+Use `block` to make the button expand to fill its container width.
 
 ```jsx live
-<HStack gap={2}>
-  <Button onClick={console.log} endIcon="add" endIconActive variant="secondary" compact>
-    Select file
+<VStack gap={2}>
+  <Button onClick={console.log} block>
+    Full width button
+  </Button>
+  <Button onClick={console.log} variant="secondary" block>
+    Another full width
   </Button>
+</VStack>
+```
+
+### Icons
+
+#### End Icon
+
+Add an icon after the label to provide additional context or indicate direction.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap">
   <Button onClick={console.log} endIcon="forwardArrow" variant="secondary" compact>
     See more
   </Button>
+  <Button onClick={console.log} endIcon="externalLink" variant="secondary" compact>
+    Open link
+  </Button>
+</HStack>
+```
+
+#### Start Icon
+
+Add an icon before the label to reinforce the action.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap">
+  <Button onClick={console.log} startIcon="add" startIconActive variant="secondary" compact>
+    Add item
+  </Button>
+  <Button onClick={console.log} startIcon="download" variant="secondary" compact>
+    Download
+  </Button>
 </HStack>
 ```
 
+#### Full Width with Icons
+
+When using `block` with icons, the content automatically spreads across the button width.
+
+```jsx live
+<Button onClick={console.log} startIcon="wallet" endIcon="forwardArrow" variant="secondary" block>
+  Connect wallet
+</Button>
+```
+
+### Accessibility
+
+Buttons automatically use their `children` as the accessible label. For buttons with only icons or ambiguous labels, provide an `accessibilityLabel`.
+
+```jsx
+<Button onClick={handleClose} accessibilityLabel="Close dialog">
+  ×
+</Button>
+```
+
+### Composed Examples
+
+#### Confirmation Dialog
+
+A common pattern using primary and secondary buttons together.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" justifyContent="flex-end">
+  <Button onClick={console.log} variant="secondary" transparent>
+    Cancel
+  </Button>
+  <Button onClick={console.log}>Confirm</Button>
+</HStack>
+```
+
+#### Destructive Confirmation
+
+Use negative buttons with a secondary cancel option for destructive actions.
+
+```jsx live
+<HStack gap={2} flexWrap="wrap" justifyContent="flex-end">
+  <Button onClick={console.log} variant="secondary" transparent>
+    Cancel
+  </Button>
+  <Button onClick={console.log} variant="negative">
+    Delete
+  </Button>
+</HStack>
+```
+
+#### Form Actions
+
+A full-width primary action with a compact secondary option.
+
+```jsx live
+<VStack gap={2}>
+  <Button onClick={console.log} block>
+    Create account
+  </Button>
+  <Button onClick={console.log} variant="secondary" transparent block>
+    Already have an account? Sign in
+  </Button>
+</VStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |