AgentAvatar
The square letter tile of a coding agent, in session lists, tabs and chips. The app passes the letters and the colour from its agent list.
- AgentAvatar
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AgentAvatar
CXCuG$C
Dark theme, AgentAvatar
CXCuG$C
High contrast theme, AgentAvatar
CXCuG$C
UsageLink to the section Usage
import { AgentAvatar } from '@skribly/ui/brand'<AgentAvatar letters="C" color="var(--sk-tool-agent)" label="Claude Code" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Decoration unless label is set.
- The letters stay on the foreground token over a tint of at most 24 percent, which keeps text contrast above 4.5:1 for any colour, and the full colour goes to the border.
This demo runs through axe in all three themes on every test run. See what the tests check.