Installation
bash
npx axis-cli add agent-avatar --agenticSizes
S
sm
M
md
L
lg
X
xl
Types
C
C
S
Status
O
B
O
Usage
tsx
import { AgentAvatar } from '@axis-ds/agentic-ui'
export function Example() {
return (
<div className="flex items-center gap-4">
<AgentAvatar name="Claude" type="assistant" status="online" />
<AgentAvatar name="Code Tool" type="tool" status="busy" />
<AgentAvatar name="System" type="system" status="offline" />
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
nameRequired | string | - | 에이전트 이름 |
src | string | - | 이미지 URL |
size | "sm" | "md" | "lg" | "xl" | "md" | 아바타 크기 |
status | "online" | "busy" | "offline" | - | 상태 표시 |
type | "assistant" | "tool" | "system" | "assistant" | 에이전트 타입 |
className | string | - | 추가 CSS 클래스 |
nameRequiredType:
string에이전트 이름
srcType:
stringDefault:
-이미지 URL
sizeType:
"sm" | "md" | "lg" | "xl"Default:
"md"아바타 크기
statusType:
"online" | "busy" | "offline"Default:
-상태 표시
typeType:
"assistant" | "tool" | "system"Default:
"assistant"에이전트 타입
classNameType:
stringDefault:
-추가 CSS 클래스