AgentChip

Agent jako mała pigułka z awatarem, nazwą i wersją, do rzędu gotowych agentów. Brakujący agent dostaje przerywaną krawędź i może stać się przyciskiem, który go instaluje.

AgentChip

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: AgentChip

Claude Code2.1Codex0.9Cursor AgentGemini CLITerminalCodexAn agent with a very long name that does not fit the row at all

Noc, podgląd: AgentChip

Claude Code2.1Codex0.9Cursor AgentGemini CLITerminalCodexAn agent with a very long name that does not fit the row at all

Wysoki kontrast, podgląd: AgentChip

Claude Code2.1Codex0.9Cursor AgentGemini CLITerminalCodexAn agent with a very long name that does not fit the row at all

UżycieLink do sekcji Użycie

tsx

import { AgentChip } from '@skribly/ui/brand'

tsx

<AgentChip name="Codex" letters="X" detail="0.9" />
<AgentChip
  name="Aider" letters="A" available={false}
  unavailableLabel="not installed" actionLabel="Install"
  onPress={install} isPending={installing}
/>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Brakujący agent jest pokazany przerywaną krawędzią i znakiem pobierania, a unavailableLabel jest odczytywane, więc samo wyblaknięcie nigdy nie jest jedynym sygnałem.
Jako przycisk jego nazwą jest agent, stan i actionLabel.
W trakcie oczekiwania zachowuje fokus, ignoruje naciśnięcia, a React Aria ogłasza go jako zajęty.
Długie nazwy są ucinane wewnątrz plakietki, która nigdy nie wychodzi poza kontener.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.