ToolbarButton

Cichy przycisk pasków narzędzi agenta, z ikoną i opcjonalnym tekstem. Wybierz go wewnątrz TerminalBar albo nagłówka panelu; gdzie indziej użyj Button.

ToolbarButton

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ToolbarButton

Noc, podgląd: ToolbarButton

Wysoki kontrast, podgląd: ToolbarButton

UżycieLink do sekcji Użycie

tsx

import { ToolbarButton } from '@skribly/ui/agents'

tsx

<ToolbarButton label={t('attach')} icon={<Paperclip />} onPress={attach} />
<ToolbarButton label={t('remote')} pendingLabel={t('starting')} isPending={busy} icon={<Smartphone />}>Remote</ToolbarButton>

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ść

Przyciski tylko z ikoną przyjmują label jako nazwę i pokazują ją jako dymek podpowiedzi po najechaniu i przy fokusie.
Z widocznym tekstem etykieta jest odczytywana pierwsza, a widoczne słowa zostają w nazwie.
Pending zamienia ikonę na wskaźnik i odczytuje pendingLabel.
Active dodaje podbarwienie; połącz go ze słowem albo zmianą ikony.
Cel minimum 24 px, widoczna obwódka przy fokusie z klawiatury i ramka w trybie wymuszonych kolorów.

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