DokumentacjaKomponenty
Przycisk
Pigułka z ramką 2 px i celem dotyku co najmniej 44 px. Wszystkie warianty mają jedną bazę i różnią się tylko tokenami koloru.
- 1Kontener: pigułka (promień 9999 px), min. wysokość 44 px
- 2Ramka 2 px w tokenie ramki wariantu
- 3Ikona 16 / 20 / 24 px (sm / default / lg), opcjonalna
- 4Etykieta: Inter 600, jedna linia, bez łamania
Warianty
Pięć wariantów, jedna baza. Różnią się wyłącznie tokenami koloru; na hover każdy wariant przechodzi w głęboki niebieski, akcent całego systemu.
Rozmiary
Mały rozmiar zmienia odstępy, tekst i ikonę, ale nie cel dotyku: sm nadal ma co najmniej 44 px wysokości.
Z ikonami
Stany
Hover i fokus są poniżej wymuszone, żeby było je widać bez myszy. Przyciski wyżej reagują na prawdziwy wskaźnik i klawiaturę.
Spoczynek Hover Fokus Wyłączony
Spoczynek Hover Fokus Wyłączony
Spoczynek Hover Fokus Wyłączony
Spoczynek Hover Fokus Wyłączony
Ton ciemny
Na ciemnych powierzchniach outline dostaje ramkę z 20 % bieli i biały tekst; ghost robi się biały i na hover wypełnia się głębokim niebieskim.
API
Propsy Button i ButtonLink. Pozostałe natywne atrybuty przycisku przechodzą dalej.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" | "link" | "default" | Zestaw kolorów. Wszystkie warianty mają jedną bazę (kształt, ramka, rozmiary). |
size | "sm" | "default" | "lg" | "default" | sm i default trzymają minimum 44 px wysokości; lg ma 48 px. |
tone | "light" | "dark" | "light" | Ton ciemny przemalowuje outline i ghost na ciemne powierzchnie. |
type | "button" | "submit" | "reset" | "button" | Natywny typ przycisku; nie wysyła formularza przypadkiem. |
disabled | boolean | false | Krycie 50 %, bez zdarzeń wskaźnika. |
href + link | string + komponent linku | – | ButtonLink: ten sam wygląd dla nawigacji; aplikacja wstrzykuje swój link routera. |
Dostępność
- Natywny element button: działa Enter i Spacja, czytnik ogłasza przycisk.
- Cel dotyku co najmniej 44 × 44 px w każdym rozmiarze (WCAG 2.5.5).
- Pierścień focus-visible 3 px w tokenie ring przy 50 %; sam hover nie niesie znaczenia.
- Kontrast: default 15,7:1, hover 7,6:1, secondary 16,3:1, outline 13,3:1 na tle strony.
- Wariant link: 4,76:1 na bieli, ale 4,32:1 na tle strony, więc należy na karty, nie bezpośrednio na liliowe tło.
- Przycisk z samą ikoną potrzebuje nazwy dostępnej (aria-label); same ikony są aria-hidden.