ConfirmDialog

Pyta przed akcją, którą trudno cofnąć. Czeka na akcję asynchroniczną, pokazuje stan oczekiwania i zostawia okno otwarte z błędem, jeśli akcja się nie powiedzie.

ConfirmDialog

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ConfirmDialog

Noc, podgląd: ConfirmDialog

Wysoki kontrast, podgląd: ConfirmDialog

UżycieLink do sekcji Użycie

tsx

import { ConfirmDialog } from '@skribly/ui/overlays'

tsx

<ConfirmDialog
  tone="danger"
  trigger={<Button variant="danger">Delete</Button>}
  title="Delete this draft?"
  confirmLabel="Delete draft"
  cancelLabel="Keep it"
  error={error}
  onConfirm={remove}
>
  This cannot be undone.
</ConfirmDialog>

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

Okno typu alertdialog.
Przy akcji destrukcyjnej fokus zaczyna się na Cancel, przy każdej innej na akcji, więc Enter robi to, co bezpieczne.
Ton niebezpieczeństwa ma ikonę ostrzeżenia i mówi słowami, co się stanie.
Błąd jest ogłaszany od razu przez role="alert".
Escape jest ignorowany, gdy akcja trwa.

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