Przejdź do treści
prfct.dev

Button

Stabilny

Wywołuje akcję. Najważniejszy element interaktywny każdego interfejsu — i ten, którego najłatwiej nadużyć.

Kod źródłowyBase UIRejestr

Anatomia

  1. 1KontenerMa wypełnienie, obramowanie i pierścień fokusu zależne od wariantu. Jego wysokości pokrywają się z wysokościami pól tekstowych.
  2. 2Ikona na początkuOpcjonalna. Rozmiar i odstęp nadaje jej przycisk; po tej stronie padding się zmniejsza.
  3. 3EtykietaCzasownik, który nazywa efekt; wielka litera tylko na początku.
  4. 4Ikona na końcuOpcjonalna. Sygnalizuje kierunek albo menu.

Instalacja

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/button.json

Użycie

import { Button } from "@/components/ui/button"
<Button variant="outline">Cancel</Button>
<Button>Save changes</Button>

Przykłady

Warianty

Siedem wariantów wyraża hierarchię, nie dekorację. Główny przycisk prfct jest celowo monochromatyczny: kolor zarezerwowano dla znaczenia — zaznaczenia, fokusu, statusu — więc jedyna kolorowa akcja na powierzchni zawsze jest tą najważniejszą.

WariantZastosowanie
defaultJedyna główna akcja widoku: Zapisz, Utwórz projekt, Kontynuuj.
brandGłówna akcja, która ma nieść markę — zwykle na stronach marketingowych.
secondaryAkcje pomocnicze obok akcji głównej.
outlineNeutralne akcje z wyraźną krawędzią: Anuluj, Eksportuj, akcje na paskach narzędzi.
ghostMniej eksponowane akcje w gęstych interfejsach: na paskach narzędzi, w wierszach tabel, w nagłówkach kart.
destructiveAkcje nieodwracalne: Usuń, Unieważnij. Zwykle w oknie potwierdzenia.
linkNawigacja, która musi wyglądać jak tekst — w zdaniach albo w stopkach.

Rozmiary

Przyciski mają te same wysokości co pola tekstowe i listy wyboru — xs 28, sm 32, default 36, lg 40, xl 48 — więc kontrolki w jednym rzędzie zawsze są wyrównane. Przyciski z samą ikoną są kwadratowe w każdym rozmiarze.

Z ikonami

Oznacz ikony atrybutem data-icon="inline-start" lub data-icon="inline-end". Przycisk zmniejszy padding po tej stronie, żeby zachować równowagę optyczną, i sam dobierze rozmiar ikony — nigdy nie dodawaj klas rozmiaru do ikon wewnątrz przycisku.

<Button>
  <SendIcon data-icon="inline-start" />
  Send invite
</Button>

Sama ikona

Przycisk z samą ikoną nie ma widocznego tekstu, więc musi mieć aria-label. Dodaj do niego podpowiedź, która powtarza etykietę — z myślą o widzących użytkownikach myszy.

Ładowanie

loading zastępuje etykietę wskaźnikiem ładowania bez zmiany szerokości przycisku, ustawia aria-busy i blokuje kliknięcia — ale zostawia fokus klawiatury na przycisku, więc użytkownicy czytników ekranu i klawiatury nie tracą orientacji.

Dlaczego prop, a nie kompozycja?
Ręczna zamiana etykiety na wskaźnik ładowania zwykle zwęża przycisk, a gdy przycisk zostaje wyłączony, fokus przepada. loading zachowuje jedno i drugie. Jeśli potrzebujesz innego układu, nadal możesz samodzielnie użyć komponentu Spinner.

Jako link

Akcja, która przenosi w inne miejsce, jest linkiem, nawet jeśli wygląda jak przycisk: czytniki ekranu odczytują ją jako link, a użytkownicy mogą otworzyć ją w nowej karcie. Nadaj linkowi wygląd przycisku za pomocą buttonVariants, zamiast renderować Button jako link — Base UI nadałby mu role="button".

ZacznijDokumentacja Base UI
import Link from "next/link"
import { buttonVariants } from "@/components/ui/button"

<Link href="/docs/installation" className={buttonVariants()}>
  Get started
</Link>

Wytyczne

Kiedy używać

  • Do wywołania akcji na bieżącej stronie: wysłania formularza, otwarcia okna dialogowego, zapisu, usunięcia.
  • Do rozpoczęcia procesu: Utwórz projekt, Zaproś członka zespołu.

Kiedy nie używać

  • Do nawigacji. Użyj linku — ostylowanego za pomocą buttonVariants, jeśli ma wyglądać jak przycisk.
  • Do włączania i wyłączania ustawienia — użyj komponentu Switch.
  • Do wyboru jednej opcji z niewielkiego zestawu — użyj komponentu Toggle Group.

Hierarchia

Daj każdemu widokowi jedną akcję główną. Wszystkie pozostałe schodzą niżej — do outline, secondary lub ghost. Akcję główną umieść na końcu rzędu (w stopkach — wyrównaną do prawej), a akcje rezygnacji, takie jak Anuluj, na przeciwległym końcu.

Dobrze.Jedna akcja główna, wsparta spokojniejszymi.
Źle.Kilka głównych przycisków konkuruje ze sobą — żaden nie wygląda na najważniejszy.

Etykiety

Zacznij od czasownika i nazwij efekt: Zapisz zmiany, Usuń projekt, Wyślij 3 zaproszenia. Wielką literą pisz tylko pierwsze słowo, zmieść się w jednym–trzech słowach i nigdy nie kończ etykiety znakiem interpunkcyjnym. Etykieta musi mieć sens także wtedy, gdy czytnik ekranu odczyta ją bez kontekstu.

Dobrze.Konkretne czasowniki mówią dokładnie, co się stanie.
Źle.Ogólnikowe odpowiedzi zmuszają do ponownego czytania pytania.

Dostępność

Przycisk prfct renderuje przez Base UI natywny <button>, więc bez dodatkowej pracy przyjmuje fokus, przekazuje czytnikom ekranu swoją rolę i aktywuje się klawiszami Enter i Spacja.

KlawiszDziałanie
Tab
Przenosi fokus na przycisk. Pierścień fokusu to obrys o grubości 2 px, odsunięty od krawędzi, widoczny w każdym motywie i w trybie wymuszonych kolorów.
EnterSpacja
Aktywuje przycisk.
  • Rozmiar celu. Każdy rozmiar od sm wzwyż spełnia minimum 24 × 24 px z WCAG 2.2 (2.5.8). Rozmiarów xs i icon-xs używaj tylko w gęstych interfejsach obsługiwanych głównie kursorem.
  • Kontrast. Tekst etykiety na każdym wypełnionym wariancie osiąga 4,5:1 w obu trybach; zobacz Kolor.
  • Stan wyłączony. Wyłączone przyciski wypadają z kolejności tabulacji. Jeśli użytkownik ma się dowiedzieć, dlaczego akcja jest niedostępna, zostaw przycisk włączony i wyjaśnij to po kliknięciu albo użyj focusableWhenDisabled z podpowiedzią.
  • Ładowanie. loading ustawia aria-busy="true" i zachowuje fokus; połącz go z regionem na żywo w trybie polite albo z powiadomieniem, które przekaże wynik.

Dokumentacja API

Button

Renderuje element <button>. Przyjmuje wszystkie propsy komponentu Button z Base UI.

PropTypDomyślnie
variant

Wizualna waga przycisku.

"default" | "brand" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"
size

Wysokość i padding. Rozmiary ikonowe dają kwadratowy przycisk.

"xs" | "sm" | "default" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"
loading

Pokazuje wskaźnik ładowania, ustawia aria-busy i blokuje aktywację, zachowując szerokość i fokus.

booleanfalse
disabled

Wyłącza przycisk i usuwa go z kolejności tabulacji.

booleanfalse
focusableWhenDisabled

Pozwala wyłączonemu przyciskowi przyjmować fokus, np. żeby pokazać podpowiedź z wyjaśnieniem powodu.

booleanfalse
nativeButton

Ustaw na false, gdy render tworzy element inny niż przycisk; Base UI doda wtedy role="button" i aktywację z klawiatury. Do nawigacji użyj zamiast tego linku z buttonVariants.

booleantrue
render

Podmienia renderowany element, zachowując działanie i style.

ReactElement | (props, state) => ReactElementBrak wartości domyślnej

buttonVariants

Generator klas jest eksportowany, żeby inne elementy — przede wszystkim linki — mogły wyglądać jak przyciski, nie będąc nimi. Ikony oznaczone data-icon mają rozmiar i odstępy dokładnie takie jak w Button.

import { buttonVariants } from "@/components/ui/button"

<Link href="/pricing" className={buttonVariants({ variant: "outline", size: "sm" })}>
  Pricing
</Link>