Toggle

Instalacja#

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

Użycie#

import { Toggle } from "@/components/ui/toggle"

<Toggle aria-label="Bold">
  <BoldIcon />
</Toggle>

Przykłady#

Wariant konturowy#

Wariant outline nadaje każdemu przyciskowi widoczną krawędź. Używaj go, gdy przyciski przełączające stoją na stronie samodzielnie, a nie na pasku narzędzi.

Z tekstem#

Dodaj do ikony etykietę, gdy sama ikona mogłaby być niejednoznaczna albo gdy przycisk jest jedyną kontrolką tego rodzaju na stronie.

Rozmiary#

Przyciski przełączające mają te same wysokości co przyciski i pola tekstowe — sm 32, default 36, lg 40 — więc równo się układają na każdym pasku narzędzi.

Tryb kontrolowany#

Steruj stanem przez pressed i onPressedChange, gdy zależy od niego coś innego na stronie. Tutaj za stanem podążają ikona i tekst pomocniczy.

const [subscribed, setSubscribed] = React.useState(true)

<Toggle pressed={subscribed} onPressedChange={setSubscribed}>
  {subscribed ? <BellIcon data-icon="inline-start" /> : <BellOffIcon data-icon="inline-start" />}
  Notifications
</Toggle>

Wyłączony#

Wytyczne#

Kiedy używać#

• Do opcji formatowania i widoku, które działają od razu: pogrubienie, kursywa, zawijanie wierszy, linie siatki.
• Do oznaczania czegoś: Oznacz gwiazdką, Przypnij, Obserwuj — gdy informacją jest sam stan wciśnięcia.

Kiedy nie używać#

• Do ustawień, które działają jak preferencja — użyj Switch, który odbiera się jako włączony lub wyłączony, a nie wciśnięty.
• Do wyboru jednej opcji spośród kilku — użyj Toggle Group.
• Do wywołania akcji, która nie ma trwałego stanu — użyj Button.

Nazwij opcję, nie akcję#

Etykieta przycisku przełączającego nazywa to, czym on steruje, i jest taka sama w obu stanach. Stan pokazuje styl wciśnięcia; jeśli dodatkowo zmienia się tekst, trudno powiedzieć, na który stan się patrzy.

Dostępność#

• Renderuje natywny <button> z aria-pressed, więc czytniki ekranu przedstawiają go jako przycisk przełączający razem z bieżącym stanem.
• Przyciski z samą ikoną potrzebują aria-label. Nie umieszczaj stanu w etykiecie — Pogrubienie, a nie Pogrubienie włączone — bo przekazuje go już aria-pressed.
• Stan wciśnięcia pokazują wypełnienie i ciemniejsza etykieta, a nie sam kolor; w trybie wymuszonych kolorów rolę tę przejmuje systemowy kolor wyróżnienia.

Dokumentacja API#

Toggle#

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

toggleVariants#

Generator klas, eksportowany, żeby inne elementy — na przykład elementy Toggle Group — miały te same style.