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
npx sdaia-ui@latest add agent-handoff
import { AgentHandoff } from "sdaia-ui"1<AgentHandoff2variant="brand"3source={{ label: 'Source Agent', name: 'Software_Engineer_Bot' }}4destination={{ label: 'Destination Agent', name: 'Code_Sandbox_Compiler' }}5label="Delegating Task"6/>
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 |
A brand-tinted surface with a brand border and brand-coloured agent icons — the default style.
Loading demo: agent-handoff-brand
A subtle surface with a subtle border and neutral agent icons.
Loading demo: agent-handoff-neutral
A transparent surface with a default border and neutral agent icons.
Loading demo: agent-handoff-outline
Hide the connector pill with showLabel={false} — leaving just the directional arrow between the two agents.
Loading demo: agent-handoff-without-label