Component Badges

Overview

Component badges are small labels that identify component and instance groups on the canvas.

When badges appear

Badges are shown under these rules:

• Main components always show their name badge (as long as the component is visible).
• Instances show badges only when selected or when the instance is in the active scope stack (for example, after entering component edit mode).

Hidden objects do not display badges.

Visual details

• Main components render badges in purple (#8B5CF6).
• Instances render badges in blue (#3B82F6).
• Badge size stays consistent while zooming.
• When multiple component badges would overlap, they stack upward to remain readable.
• Components imported from external libraries are hidden by default and do not render badges.