The agents available for a task, each showing its name, role and live status.
Loading demo: agent-card-real-world
npx sdaia-ui@latest add agent-card
import { AgentCard } from "sdaia-ui"1<AgentCard2variant="brand"3name="Compliance_Guard_Agent"4role="Cross-border legal auditing and systemic policy constraint validation"5status="Active"6/>
A raised surface — the default style.
Loading demo: agent-card-brand
A subtle surface.
Loading demo: agent-card-neutral
A transparent surface with a default border.
Loading demo: agent-card-outline
Toggle the role line and the status (dot + badge).
Loading demo: agent-card-toggles
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
name | ReactNode | — | required |
role | ReactNode | — | optional |
showRole | boolean | true | optional |
status | ReactNode | 'Active' | optional |
statusColor | BadgeColor | 'primary' | optional |
statusDot | StatusDotStatus | 'online' | optional |
showStatus | boolean | true | optional |
dir | 'ltr' | 'rtl' | — | optional |