Badge

Krótka etykieta stanu albo liczby, taka jak Draft lub Failed. Wybierz ją dla stałych faktów w wierszach i nagłówkach; gdy stan zmienia się na żywo, użyj StatusDot.

Badge

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Badge

DraftNewDoneWaitingFailedInfoSmallSuggested by the assistant from the last three weeks of activity

Noc, podgląd: Badge

DraftNewDoneWaitingFailedInfoSmallSuggested by the assistant from the last three weeks of activity

Wysoki kontrast, podgląd: Badge

DraftNewDoneWaitingFailedInfoSmallSuggested by the assistant from the last three weeks of activity

UżycieLink do sekcji Użycie

tsx

import { Badge } from '@skribly/ui/feedback'

tsx

<Badge tone="ok" icon={<Check />}>Done</Badge>

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

Zwykły tekst, więc czytniki ekranu odczytują słowo.
Ikony są ukryte.
Każdy ton łączy swój kolor z tekstem, a pary tekstu i podbarwienia spełniają 4,5:1 we wszystkich trzech motywach.
Długi tekst jest ucinany na ekranie i zostaje w całości dla czytników ekranu; przekaż title, gdy pełny tekst ma znaczenie.
Przezroczysta ramka zachowuje obrys 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.