Agent Card

The agents available for a task, each showing its name, role and live status.

Loading demo: agent-card-real-world

Installation

npx sdaia-ui@latest add agent-card

Usage

import { AgentCard } from "sdaia-ui"

1<AgentCard
2  variant="brand"
3  name="Compliance_Guard_Agent"
4  role="Cross-border legal auditing and systemic policy constraint validation"
5  status="Active"
6/>

Examples

Brand

A raised surface — the default style.

Loading demo: agent-card-brand

Neutral

A subtle surface.

Loading demo: agent-card-neutral

Outline

A transparent surface with a default border.

Loading demo: agent-card-outline

Optional slots

Toggle the role line and the status (dot + badge).

Loading demo: agent-card-toggles

API Reference

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