{"record":{"id":"89b9d0699146f517","repo":"facebook/react","slug":"unsupported-type-type-specified-for-buttonico","errorCode":null,"errorMessage":"Unsupported type \"${type}\" specified for ButtonIcon","messagePattern":"Unsupported type \"(.+?)\" specified for ButtonIcon","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-devtools-shared/src/devtools/views/ButtonIcon.js","lineNumber":207,"sourceCode":"      viewBox = panelIcons;\n      break;\n    case 'suspend':\n      pathData = PATH_SUSPEND;\n      break;\n    case 'undo':\n      pathData = PATH_UNDO;\n      break;\n    case 'up':\n      pathData = PATH_UP;\n      break;\n    case 'view-dom':\n      pathData = PATH_VIEW_DOM;\n      break;\n    case 'view-source':\n      pathData = PATH_VIEW_SOURCE;\n      break;\n    default:\n      console.warn(`Unsupported type \"${type}\" specified for ButtonIcon`);\n      break;\n  }\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={`${styles.ButtonIcon} ${className}`}\n      width=\"24\"\n      height=\"24\"\n      viewBox={viewBox}>\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path fill=\"currentColor\" d={pathData} />\n    </svg>\n  );\n}\n\nconst PATH_ADD =\n  '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';","sourceCodeStart":189,"sourceCodeEnd":225,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js#L189-L225","documentation":"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).","triggerScenarios":"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).","commonSituations":"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.","solutions":["Use one of the literal type values handled in ButtonIcon.js (see the switch cases).","Check for typos or renamed values (e.g. 'find' vs 'search') against the version of react-devtools-shared you ship.","Update react-devtools-shared so your icon name exists in its ButtonIcon switch."],"exampleFix":"// before\n<ButtonIcon type=\"ved-dom\" />\n\n// after\n<ButtonIcon type=\"view-dom\" />","handlingStrategy":"type-guard","validationCode":"const BUTTON_ICON_TYPES = new Set([\n  'add', 'cancel', 'clear', 'close', 'collapsed', 'copy', 'delete', 'down',\n  'editor', 'expanded', 'export', 'filter', 'import', 'log-data', 'more',\n  'next', 'parse-hook-names', 'previous', 'record', 'reload', 'save',\n  'search', 'find', 'settings', 'error', 'panel-left-close',\n  'panel-left-open', 'panel-right-close', 'panel-right-open',\n  'panel-bottom-open', 'panel-bottom-close', 'filter-on', 'filter-off',\n  'play', 'pause', 'skip-previous', 'skip-next', 'suspend', 'undo', 'up',\n  'view-dom', 'view-source',\n]);\nif (!BUTTON_ICON_TYPES.has(type)) {\n  throw new Error(`Unknown ButtonIcon type: ${type}`);\n}","typeGuard":"type ButtonIconType =\n  | 'add' | 'cancel' | 'clear' | 'close' | 'collapsed' | 'copy' | 'delete'\n  | 'down' | 'editor' | 'expanded' | 'export' | 'filter' | 'import'\n  | 'log-data' | 'more' | 'next' | 'parse-hook-names' | 'previous'\n  | 'record' | 'reload' | 'save' | 'search' | 'find' | 'settings'\n  | 'error' | 'panel-left-close' | 'panel-left-open' | 'panel-right-close'\n  | 'panel-right-open' | 'panel-bottom-open' | 'panel-bottom-close'\n  | 'filter-on' | 'filter-off' | 'play' | 'pause' | 'skip-previous'\n  | 'skip-next' | 'suspend' | 'undo' | 'up' | 'view-dom' | 'view-source';\n\n// Mirror this list from the ButtonIcon.js switch in YOUR react-devtools-shared version.","tryCatchPattern":null,"preventionTips":["Pass only literal type values; forbid arbitrary strings at the call site with a union type.","After upgrading react-devtools-shared, diff the switch in ButtonIcon.js for added/renamed types.","Fail fast in dev on unknown icon types instead of rendering a blank icon."],"tags":["react-devtools","button-icon","invalid-prop-value","ui"],"backgroundTag":"invalid-prop-value","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}