@coinbase/cds-mcp-server 8.28.1 → 8.29.0

package/mcp-docs/mobile/components/Combobox.txt

@@ -0,0 +1,187 @@
+# Combobox
+
+A flexible combobox component for both single and multi-selection, built for mobile applications with comprehensive accessibility support.
+
+## Import
+
+```tsx
+import { Combobox } from '@coinbase/cds-mobile/alpha/combobox'
+```
+
+## Examples
+
+### A note on search logic
+
+We use [fuse.js](https://www.fusejs.io/) to power the fuzzy search logic for Combobox. You can override this search logic with your own using the `filterFunction` prop.
+
+### Multi-Select
+
+Basic multi-selection combobox with search.
+
+```jsx
+function MultiSelect() {
+  const multiSelectOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+    { value: '4', label: 'Option 4' },
+    { value: '5', label: 'Option 5' },
+    { value: '6', label: 'Option 6' },
+    { value: '7', label: 'Option 7' },
+    { value: '8', label: 'Option 8' },
+    { value: '9', label: 'Option 9' },
+    { value: '10', label: 'Option 10' },
+  ];
+  const { value, onChange } = useMultiSelect({ initialValue: ['1'] });
+
+  return (
+    <Combobox
+      label="Multi Select"
+      onChange={onChange}
+      options={multiSelectOptions}
+      placeholder="Search..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### Single Select
+
+Single selection combobox with an option to clear the current choice.
+
+```jsx
+function SingleSelect() {
+  const singleSelectOptions = [
+    { value: null, label: 'Remove selection' },
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' },
+  ];
+  const [value, setValue] = useState(null);
+
+  return (
+    <Combobox
+      label="Single Select"
+      onChange={setValue}
+      options={singleSelectOptions}
+      placeholder="Search..."
+      value={value}
+    />
+  );
+}
+```
+
+### Controlled Search
+
+Manage the search text externally while letting the combobox stay in sync.
+
+```jsx
+function ControlledSearch() {
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+  const [searchText, setSearchText] = useState('');
+
+  const fruitOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+  ];
+
+  return (
+    <Combobox
+      label="Controlled search"
+      onChange={onChange}
+      onSearch={setSearchText}
+      options={fruitOptions}
+      placeholder="Type to search..."
+      searchText={searchText}
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+### Helper Text
+
+Use helper text to guide how many selections a user should make.
+
+```jsx
+function HelperTextExample() {
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+
+  const teamOptions = [
+    { value: 'john', label: 'John Smith', description: 'Engineering' },
+    { value: 'jane', label: 'Jane Doe', description: 'Design' },
+    { value: 'bob', label: 'Bob Johnson', description: 'Product' },
+    { value: 'alice', label: 'Alice Williams', description: 'Engineering' },
+  ];
+
+  return (
+    <Combobox
+      helperText="Select up to 4 team members"
+      label="Team members"
+      onChange={onChange}
+      options={teamOptions}
+      placeholder="Search team members..."
+      type="multi"
+      value={value}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `onChange` | `(value: Type extends multi ? SelectOptionValue \| SelectOptionValue[] \| null : SelectOptionValue \| null) => void` | Yes | `-` | - |
+| `options` | `SelectOptionList<Type, SelectOptionValue>` | Yes | `-` | Array of options to display in the select dropdown. Can be individual options or groups with label and options |
+| `value` | `string \| SelectOptionValue[] \| null` | Yes | `-` | - |
+| `ComboboxControlComponent` | `ComboboxControlComponent` | No | `-` | - |
+| `ComboboxDropdownComponent` | `SelectDropdownComponent` | No | `-` | - |
+| `SelectAllOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the Select All option |
+| `SelectControlComponent` | `SelectControlComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the select control |
+| `SelectDropdownComponent` | `SelectDropdownComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render the dropdown container |
+| `SelectEmptyDropdownContentsComponent` | `SelectEmptyDropdownContentComponent` | No | `-` | Custom component to render when no options are available |
+| `SelectOptionComponent` | `SelectOptionComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render individual options |
+| `SelectOptionGroupComponent` | `SelectOptionGroupComponent<Type, SelectOptionValue>` | No | `-` | Custom component to render group headers |
+| `accessibilityRoles` | `{ option?: AccessibilityRole; } \| undefined` | No | `-` | Accessibility roles for dropdown elements |
+| `accessory` | `ReactElement<CellAccessoryProps, string \| JSXElementConstructor<any>>` | No | `-` | - |
+| `clearAllLabel` | `string` | No | `-` | Label for the Clear All option in multi-select mode |
+| `closeButtonLabel` | `string` | No | `-` | Label for close button when combobox is open (mobile only) |
+| `compact` | `boolean` | No | `-` | Whether to use compact styling for the select |
+| `defaultOpen` | `boolean` | No | `-` | Initial open state when component mounts (uncontrolled mode) |
+| `defaultSearchText` | `string` | No | `-` | Default search text value for uncontrolled mode |
+| `disableClickOutsideClose` | `boolean` | No | `-` | Whether clicking outside the dropdown should close it |
+| `disabled` | `boolean` | No | `false` | Toggles input interactability and opacity |
+| `emptyOptionsLabel` | `string` | No | `-` | Label displayed when there are no options available |
+| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., value, status). Replaces the deprecated detail prop. |
+| `endNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component |
+| `filterFunction` | `((options: SelectOptionList<Type, SelectOptionValue>, searchText: string) => SelectOption<SelectOptionValue>[])` | No | `-` | Custom filter function for searching options |
+| `helperText` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Helper text displayed below the select |
+| `hiddenSelectedOptionsLabel` | `string` | No | `-` | Label to show for showcasing count of hidden selected options |
+| `hideSearchInput` | `boolean` | No | `-` | Hide the search input |
+| `hideSelectAll` | `boolean` | No | `-` | Whether to hide the Select All option in multi-select mode |
+| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Label displayed above the control |
+| `labelVariant` | `inside \| outside` | No | `'outside'` | The variant of the label. Only used when compact is not true. |
+| `maxSelectedOptionsToShow` | `number` | No | `-` | Maximum number of selected options to show before truncating |
+| `media` | `ReactElement` | No | `-` | Media rendered at the start of the cell (icon, avatar, image, etc). |
+| `onSearch` | `((searchText: string) => void)` | No | `-` | Search text change handler |
+| `open` | `boolean` | No | `-` | Controlled open state of the dropdown |
+| `placeholder` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Placeholder text displayed when no option is selected |
+| `ref` | `null \| (instance: SelectRef \| null) => void \| RefObject<SelectRef>` | No | `-` | - |
+| `removeSelectedOptionAccessibilityLabel` | `string` | No | `-` | Accessibility label for each chip in a multi-select |
+| `searchText` | `string` | No | `-` | Controlled search text value |
+| `selectAllLabel` | `string` | No | `-` | Label for the Select All option in multi-select mode |
+| `setOpen` | `((open: boolean \| ((open: boolean) => boolean)) => void)` | No | `-` | Callback to update the open state |
+| `startNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component |
+| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<ViewStyle \| Falsy \| RegisteredStyle<ViewStyle>>` | No | `-` | Inline styles for the root element |
+| `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; controlStartNode?: StyleProp<ViewStyle>; controlInputNode?: StyleProp<ViewStyle>; controlValueNode?: StyleProp<ViewStyle>; controlLabelNode?: StyleProp<ViewStyle>; controlHelperTextNode?: StyleProp<ViewStyle>; controlEndNode?: StyleProp<ViewStyle>; controlBlendStyles?: InteractableBlendStyles; dropdown?: StyleProp<ViewStyle>; option?: StyleProp<ViewStyle>; optionCell?: StyleProp<ViewStyle>; optionContent?: StyleProp<ViewStyle>; optionLabel?: StyleProp<ViewStyle>; optionDescription?: StyleProp<ViewStyle>; optionBlendStyles?: InteractableBlendStyles \| undefined; selectAllDivider?: StyleProp<ViewStyle>; emptyContentsContainer?: StyleProp<ViewStyle>; emptyContentsText?: StyleProp<ViewStyle>; optionGroup?: StyleProp<ViewStyle>; } \| undefined` | No | `-` | Custom styles for different parts of the select |
+| `testID` | `string` | No | `-` | Test ID for the root element |
+| `type` | `multi \| single` | No | `-` | Whether the select allows single or multiple selections |
+| `variant` | `primary \| secondary \| positive \| negative \| foregroundMuted \| foreground` | No | `-` | Determines the sentiment of the input. Because we allow startContent and endContent to be custom ReactNode, the content placed inside these slots will not change colors according to the variant. You will have to add that yourself |
+
+

package/mcp-docs/mobile/components/ContainedAssetCard.txt

@@ -23,9 +23,9 @@ function Example() {
     {
       title: '$4.15',
       description: (
-        <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;73.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'ETH',
       onPress: NoopFn,
@@ -55,9 +55,9 @@ function Example() {
     {
       title: '$309.43',
       description: (
-        <TextLabel2 as="p" color="fgPositive" numberOfLines={2}>
+        <Text as="p" font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;3.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Bitcoin',
       onPress: NoopFn,

package/mcp-docs/mobile/components/ContentCard.txt

@@ -30,9 +30,9 @@ function Example() {
           }
           meta={
             <Box marginLeft={-1}>
-              <TextLabel2 as="span" color="fgMuted" marginLeft={-1} numberOfLines={1}>
+              <Text as="span" font="label2" color="fgMuted" marginLeft={-1} numberOfLines={1}>
                 ・News・5 hrs
-              </TextLabel2>
+              </Text>
             </Box>
           }
           title="Description"
@@ -41,12 +41,12 @@ function Example() {
           body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
         />
@@ -55,9 +55,9 @@ function Example() {
         <ContentCardHeader
           meta={
             <Box marginLeft={-1}>
-              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
                 ・News・5 hrs
-              </TextLabel2>
+              </Text>
             </Box>
           }
           title="Brian Armstrong"
@@ -66,12 +66,12 @@ function Example() {
           body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
           media={
@@ -130,18 +130,18 @@ function Example() {
       <ContentCard gap={3}>
         <ContentCardBody
           body={
-            <TextBody as="p" paddingTop={0.5}>
+            <Text as="p" font="body" paddingTop={0.5}>
               Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s
-            </TextBody>
+            </Text>
           }
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
           media={
@@ -165,7 +165,9 @@ function Example() {
               <TextLegal as="span" color="fgMuted">
                 Reward
               </TextLegal>
-              <TextHeadline as="span">+$15 ACS</TextHeadline>
+              <Text as="span" font="headline">
+                +$15 ACS
+              </Text>
             </VStack>
           </HStack>
           <Button compact accessibilityLabel="Claim now" variant="secondary">
@@ -203,9 +205,9 @@ function Example() {
         }
         meta={
           <Box marginLeft={-1}>
-            <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+            <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
               @matdryhurst・7 mo
-            </TextLabel2>
+            </Text>
           </Box>
         }
         title="Mat Dryhurst"
@@ -220,9 +222,9 @@ function Example() {
           avatar="/img/card/content_card_custom_avatar_1.png"
           meta={
             <Box marginLeft={-1}>
-              <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+              <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
                 ・News・5 hrs
-              </TextLabel2>
+              </Text>
             </Box>
           }
           title="Description"
@@ -240,12 +242,12 @@ function Example() {
           gap={1.5}
           label={
             <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-              <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+              <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
                 BTC
-              </TextLabel2>
-              <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+              </Text>
+              <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
                 ↗ 5.12%
-              </TextLabel2>
+              </Text>
             </HStack>
           }
           paddingBottom={3}

package/mcp-docs/mobile/components/ContentCardBody.txt

@@ -18,12 +18,12 @@ import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
     body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
     label={
       <HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
-        <TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
+        <Text as="p" font="label2" color="fgMuted" numberOfLines={1}>
           BTC
-        </TextLabel2>
-        <TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
+        </Text>
+        <Text font="label2" accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
           ↗ 5.12%
-        </TextLabel2>
+        </Text>
       </HStack>
     }
   />

package/mcp-docs/mobile/components/ContentCardHeader.txt

@@ -20,9 +20,9 @@ function Example() {
         avatar="/img/card/content_card_custom_avatar_1.png"
         meta={
           <Box marginLeft={-1}>
-            <TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
+            <Text as="span" font="label2" color="fgMuted" numberOfLines={1}>
               ・News・5 hrs
-            </TextLabel2>
+            </Text>
           </Box>
         }
         title="Description"

package/mcp-docs/mobile/components/FloatingAssetCard.txt

@@ -58,9 +58,9 @@ function Example() {
     {
       title: '#7560',
       description: (
-        <TextLabel2 color="fgPositive" numberOfLines={2}>
+        <Text font="label2" color="fgPositive" numberOfLines={2}>
           &#x2197;6.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Bored Ape',
       onPress: NoopFn,
@@ -76,9 +76,9 @@ function Example() {
     {
       title: '#2015',
       description: (
-        <TextLabel2 color="fgNegative" numberOfLines={2}>
+        <Text font="label2" color="fgNegative" numberOfLines={2}>
           &#x2198;6.37%
-        </TextLabel2>
+        </Text>
       ),
       subtitle: 'Pudgy Penguins',
       onPress: NoopFn,
@@ -115,9 +115,9 @@ function Example() {
     {
       title: 'Parallel',
       description: (
-        <TextLabel2 color="fgMuted" numberOfLines={2}>
+        <Text font="label2" color="fgMuted" numberOfLines={2}>
           &#9733;4.5
-        </TextLabel2>
+        </Text>
       ),
       onPress: NoopFn,
       media: (

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

@@ -10,19 +10,23 @@ import { IconButton } from '@coinbase/cds-mobile/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.
+The only required props are `name` (which determines the icon) and `accessibilityLabel` (for screen readers).
 
-<br />
+```jsx
+<HStack gap={2}>
+  <IconButton name="gear" accessibilityLabel="Open settings" onPress={console.log} />
+  <IconButton name="close" accessibilityLabel="Close modal" onPress={console.log} />
+  <IconButton name="refresh" accessibilityLabel="Refresh data" onPress={console.log} />
+</HStack>
+```
 
-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)).
+### Variants
 
-:::
+Use variants to denote intent and importance. The `active` prop fills the icon when enabled.
 
 ```jsx
 <HStack gap={2}>
@@ -42,7 +46,7 @@ label node (See [Composed example](#composed-example)).
   />
   <IconButton
     name="phone"
-    accessibilityLabel="View settings"
+    accessibilityLabel="Call support"
     variant="tertiary"
     onPress={console.log}
   />
@@ -55,54 +59,107 @@ label node (See [Composed example](#composed-example)).
 </HStack>
 ```
 
-### Transparent variant
+#### Transparent
 
-Use the `transparent` prop to make the background and border transparent until the user interacts with the button.
+Use the `transparent` prop to remove the background until the user interacts with the button.
 
 ```jsx
-<IconButton
-  active
-  name="orderHistory"
-  accessibilityLabel="View past order history"
-  variant="primary"
-  transparent
-  onPress={console.log}
-/>
+<HStack gap={2}>
+  <IconButton
+    active
+    name="orderHistory"
+    accessibilityLabel="View past order history"
+    variant="primary"
+    transparent
+    onPress={console.log}
+  />
+  <IconButton
+    active
+    name="gear"
+    accessibilityLabel="Update settings"
+    variant="secondary"
+    transparent
+    onPress={console.log}
+  />
+  <IconButton
+    name="phone"
+    accessibilityLabel="Call support"
+    variant="tertiary"
+    transparent
+    onPress={console.log}
+  />
+  <IconButton
+    name="checkmark"
+    accessibilityLabel="Verify your identity"
+    variant="foregroundMuted"
+    transparent
+    onPress={console.log}
+  />
+</HStack>
 ```
 
-### Loading state
+### States
+
+#### Loading
 
-Use the `loading` prop to show a spinner and make the button non-interactive during async operations.
+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
-<IconButton
-  active
-  name="orderHistory"
-  accessibilityLabel="Loading transaction history"
-  variant="primary"
-  loading
-  onPress={console.log}
-/>
+<HStack gap={2}>
+  <IconButton
+    active
+    name="orderHistory"
+    accessibilityLabel="Loading transaction history"
+    variant="primary"
+    loading
+    onPress={console.log}
+  />
+  <IconButton
+    active
+    name="gear"
+    accessibilityLabel="Loading settings"
+    variant="secondary"
+    loading
+    onPress={console.log}
+  />
+</HStack>
 ```
 
-### Disabled state
+#### Disabled
 
 Use the `disabled` prop to prevent interaction and show a disabled visual state.
 
 ```jsx
-<IconButton
-  active
-  name="orderHistory"
-  accessibilityLabel="View transaction history"
-  variant="primary"
-  disabled
-  onPress={console.log}
-/>
+<HStack gap={2}>
+  <IconButton
+    active
+    name="orderHistory"
+    accessibilityLabel="View transaction history"
+    variant="primary"
+    disabled
+    onPress={console.log}
+  />
+  <IconButton
+    active
+    name="gear"
+    accessibilityLabel="View settings"
+    variant="secondary"
+    disabled
+    onPress={console.log}
+  />
+  <IconButton
+    name="checkmark"
+    accessibilityLabel="Approve transaction"
+    variant="foregroundMuted"
+    disabled
+    onPress={console.log}
+  />
+</HStack>
 ```
 
 ### Sizing
 
-IconButtons are compact by default. Set the `compact` prop to `false` for larger touch targets.
+IconButtons are compact by default. Use `compact={false}` for larger touch targets.
 
 ```jsx
 <HStack gap={2} alignItems="center">
@@ -125,28 +182,39 @@ IconButtons are compact by default. Set the `compact` prop to `false` for larger
 </HStack>
 ```
 
-### Composed example
+### Accessibility
 
-As referenced above, if you're building a composed system, use the `accessibilityLabelledBy` prop and an `id` on the text node.
+Since icon buttons have no visible text, an `accessibilityLabel` is required to describe the button's purpose for screen readers.
 
 ```jsx
-function composedExample() {
+<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
+function ClaimDropExample() {
   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}
+        name="drops"
+        active={active}
         variant={variant}
         onPress={() => setActive((active) => !active)}
-        // Accessibility props
-        id="my-icon--id"
-        accessibilityLabelledBy="my-label--id"
+        id="claim-drop-button"
+        accessibilityLabelledBy="claim-drop-label"
       />
-      <Text font="label1" as="label" htmlFor="my-icon--id" id="my-label--id">
+      <Text font="label1" id="claim-drop-label">
         {label}
       </Text>
     </HStack>
@@ -154,12 +222,19 @@ function composedExample() {
 }
 ```
 
-### A11y
+#### Notification Bell
 
-Since icon buttons have no descriptive text or children, an accessibility label must be provided.
+An icon button with a badge showing the notification count. Uses `DotCount` to display the number of unread notifications.
 
 ```jsx
-<IconButton name="close" accessibilityLabel="Close trade modal" />
+<DotCount count={3} overlap="circular" pin="top-end">
+  <IconButton
+    name="bell"
+    accessibilityLabel="Notifications, 3 unread"
+    variant="secondary"
+    onPress={console.log}
+  />
+</DotCount>
 ```
 
 ## Props