Button

Domyślny sposób uruchamiania akcji. Użyj primary dla jedynej głównej akcji widoku, outline albo ghost dla pozostałych, danger dla usuwania, a danger-solid tylko do potwierdzenia czegoś, czego nie da się cofnąć.

Button

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Button

Variants

Sizes

States

Long label in a narrow box

Noc, podgląd: Button

Variants

Sizes

States

Long label in a narrow box

Wysoki kontrast, podgląd: Button

Variants

Sizes

States

Long label in a narrow box

UżycieLink do sekcji Użycie

tsx

import { Button } from '@skribly/ui/actions'

tsx

<Button onPress={save} isPending={saving} pendingLabel="Saving">
  <Save aria-hidden />
  Save changes
</Button>
<Button variant="danger">Remove</Button>

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

Natywny przycisk: Tab, aby do niego dojść, Enter lub Spacja, aby go nacisnąć.
W trakcie oczekiwania zachowuje fokus, ignoruje naciśnięcia, wstrzymuje wysłanie formularza i jest odczytywany z etykietą oczekiwania.
Wyłączone przyciski wypadają z kolejności Tab; gdy użytkownik ma wiedzieć dlaczego, użyj GatedAction.
Długie etykiety się zawijają zamiast się przepełniać, a każdy wariant zachowuje ramkę, więc pozostaje widoczny w trybie wysokiego kontrastu systemu Windows.

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