Components/blocks/Balloon Callout

Balloon Callout

Name: Substrate UI
Author: SubstrateUI

Open Source

New

Controlled or uncontrolled BOM balloon and target linkage with one shared interaction state.

API and behavior

Compound exports, owned slots, interaction law, and family hook routing.

Required props: BalloonLinkGroup.linkIdBalloonCallout.item
Optional props: defaultActiveleaderBalloonLinkedTarget.asChild
Controlled props: activeonActiveChange
Companion exports: BalloonLinkGroupBalloonCalloutBalloonLinkedTarget
Owned data-slot contract: balloon-link-groupballoon-calloutballoon-callout-glyphballoon-callout-leaderballoon-linked-target

MOTIF_REGISTRY.balloon-callout → apparatusTarget('balloon-callout')

Focus entering either linked node activates the pair; focus leaving the group clears it.

The callout and target share stable aria-controls/aria-describedby ids and one interaction state.

Draft consumes outline promotion, leader-line, target, and fixed press hooks.

Documented states

inactive linkagecontrolled active linkagelong target content

npx shadcn@latest add @substrateui/balloon-callout --yes

Upgrading a project that installed base before F1? Refresh the shared hooks first:

npx shadcn@latest add @substrateui/base --yes --overwrite

npm install class-variance-authority