Agent Handoff

A task moving from one agent to the next, with a label explaining why the work was passed on — across Brand, Neutral, and Outline styles.

Loading demo: agent-handoff-real-world

Installation

npx sdaia-ui@latest add agent-handoff

Usage

import { AgentHandoff } from "sdaia-ui"

1<AgentHandoff
2  variant="brand"
3  source={{ label: 'Source Agent', name: 'Software_Engineer_Bot' }}
4  destination={{ label: 'Destination Agent', name: 'Code_Sandbox_Compiler' }}
5  label="Delegating Task"
6/>

Examples

Brand

A brand-tinted surface with a brand border and brand-coloured agent icons — the default style.

Loading demo: agent-handoff-brand

Neutral

A subtle surface with a subtle border and neutral agent icons.

Loading demo: agent-handoff-neutral

Outline

A transparent surface with a default border and neutral agent icons.

Loading demo: agent-handoff-outline

Without label

Hide the connector pill with showLabel={false} — leaving just the directional arrow between the two agents.

Loading demo: agent-handoff-without-label

API Reference

Agent Handoff

Prop	Type	Default	Required
variant	'brand' \| 'neutral' \| 'outline'	'brand'	optional
source	AgentHandoffAgent	—	required
destination	AgentHandoffAgent	—	required
label	ReactNode	'Delegating Task'	optional
showLabel	boolean	true	optional
arrowIcon	string	arrowRight02Stroke	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
as	ElementType	'div'	optional