facebook/react · warning

Unsupported type "${type}" specified for ButtonIcon

Error message

Unsupported type "${type}" specified for ButtonIcon

What it means

ButtonIcon (packages/react-devtools-shared/src/devtools/views/ButtonIcon.js) maps a type prop to an SVG path via a switch over the known set ('add', 'cancel', 'clear', 'close', 'collapsed', 'copy', 'delete', 'down', 'editor', 'expanded', 'export', 'filter', 'import', 'log-data', 'more', 'next', 'parse-hook-names', 'previous', 'record', 'reload', 'save', 'search', 'find', 'settings', 'error', 'panel-left-close', 'panel-left-open', 'panel-right-close', 'panel-right-open', 'panel-bottom-open', 'panel-bottom-close', 'filter-on', 'filter-off', 'play', 'pause', 'skip-previous', 'skip-next', 'suspend', 'undo', 'up', 'view-dom', 'view-source'). An unrecognized value falls through to default: it warns and renders an empty path (blank icon).

Source

Thrown at packages/react-devtools-shared/src/devtools/views/ButtonIcon.js:207

      viewBox = panelIcons;
      break;
    case 'suspend':
      pathData = PATH_SUSPEND;
      break;
    case 'undo':
      pathData = PATH_UNDO;
      break;
    case 'up':
      pathData = PATH_UP;
      break;
    case 'view-dom':
      pathData = PATH_VIEW_DOM;
      break;
    case 'view-source':
      pathData = PATH_VIEW_SOURCE;
      break;
    default:
      console.warn(`Unsupported type "${type}" specified for ButtonIcon`);
      break;
  }

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.ButtonIcon} ${className}`}
      width="24"
      height="24"
      viewBox={viewBox}>
      <path d="M0 0h24v24H0z" fill="none" />
      <path fill="currentColor" d={pathData} />
    </svg>
  );
}

const PATH_ADD =
  'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z';

View on GitHub (pinned to eafeac097b)

Solutions

1. Use one of the literal type values handled in ButtonIcon.js (see the switch cases).
2. Check for typos or renamed values (e.g. 'find' vs 'search') against the version of react-devtools-shared you ship.
3. Update react-devtools-shared so your icon name exists in its ButtonIcon switch.

Example fix

// before
<ButtonIcon type="ved-dom" />

// after
<ButtonIcon type="view-dom" />

const BUTTON_ICON_TYPES = new Set([
  'add', 'cancel', 'clear', 'close', 'collapsed', 'copy', 'delete', 'down',
  'editor', 'expanded', 'export', 'filter', 'import', 'log-data', 'more',
  'next', 'parse-hook-names', 'previous', 'record', 'reload', 'save',
  'search', 'find', 'settings', 'error', 'panel-left-close',
  'panel-left-open', 'panel-right-close', 'panel-right-open',
  'panel-bottom-open', 'panel-bottom-close', 'filter-on', 'filter-off',
  'play', 'pause', 'skip-previous', 'skip-next', 'suspend', 'undo', 'up',
  'view-dom', 'view-source',
]);
if (!BUTTON_ICON_TYPES.has(type)) {
  throw new Error(`Unknown ButtonIcon type: ${type}`);
}

type ButtonIconType =
  | 'add' | 'cancel' | 'clear' | 'close' | 'collapsed' | 'copy' | 'delete'
  | 'down' | 'editor' | 'expanded' | 'export' | 'filter' | 'import'
  | 'log-data' | 'more' | 'next' | 'parse-hook-names' | 'previous'
  | 'record' | 'reload' | 'save' | 'search' | 'find' | 'settings'
  | 'error' | 'panel-left-close' | 'panel-left-open' | 'panel-right-close'
  | 'panel-right-open' | 'panel-bottom-open' | 'panel-bottom-close'
  | 'filter-on' | 'filter-off' | 'play' | 'pause' | 'skip-previous'
  | 'skip-next' | 'suspend' | 'undo' | 'up' | 'view-dom' | 'view-source';

// Mirror this list from the ButtonIcon.js switch in YOUR react-devtools-shared version.

When it happens

Trigger: Passing a type string not in the switch (typo like 'ved-dom', or a new icon name from a different DevTools version); passing a dynamic value computed from data instead of a literal; using a renamed icon type after an API change (e.g. 'search'/'find' renames).

Common situations: Building custom DevTools UI on top of react-devtools-shared where your copy lags the icon set; copy-pasting icon names between DevTools versions; template-driven toolbars that feed arbitrary strings to ButtonIcon.

Related errors

• Unsupported type "${type}" specified for Icon
• The should not be any remaining suspense node children if th
• There should always be an Offscreen Fiber child in a hydrate
• Did not expect a host hoistable to be the root
• A dehydrated Suspense node should not have a content Fiber.

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/89b9d0699146f517. Report an issue: GitHub.