A component appearing in the list of components to instantiate that is broken during development should convey that
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3548922. -->
Reported by: [wim leers](https://www.drupal.org/user/99777)
Related to !185
>>>
<h3 id="overview">Overview</h3>
<p><em>Follow-up for <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3470422" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3470422</a></span>.</em></p>
<blockquote><p>
We've also gotten the <code>/canvas/api/v0/config/component</code> API response working again. It now provides the UI with a flag that indicates whether the known component should be available for instantiation (<code>broken: false</code>) or not (<code>broken: true</code>). That should also change the icon in the component list to something conveying brokenness.
</p></blockquote>
<p>— <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3470422" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3470422</a></span></p>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>When a component listed is known to be broken, convey it to the user — which in principle must be a developer (of either an SDC, a block plugin, a code component …):</p>
<ol>
<li>Use a different icon than the "component" icon.
</li><li>Use a different text style, such as "strikethrough": <q><del>Hero</del></q>
</li><li>Allow the preview-upon-hover to continue to work, because it conveys that the component is currently broken
</li><li><strong>Disallow</strong> dragging this into the editor frame, because creating more broken instances is pointless
</li></ol>
<h3 id="ui-changes">User interface changes</h3>
<dl>
<dt>Before</dt>
<dd><img src="https://www.drupal.org/files/issues/2025-09-26/Screenshot%202025-09-26%20at%201.06.42%20PM.png"></dd>
<dt>After</dt>
<dd><img src="https://www.drupal.org/files/issues/2025-10-03/2025-10-03%2013.50.34.gif" alt="Demo"></dd>
</dl>
> Related issue: [Issue #3470422](https://www.drupal.org/node/3470422)
> Related issue: [Issue #3520484](https://www.drupal.org/node/3520484)
issue