Toggle

Kildekode på GitHub · Les som Markdown

Toggle er en trykknapp som holder av/på-tilstand. Til forskjell fra Switch ser den ut som en vanlig knapp og egner seg for verktøylinjer, favoritt-markering og lignende. Bygget på Radix UI Toggle.

Importering

import { Toggle } from "@kilden/designsystem";

Grunnleggende bruk

<Toggle aria-label="Fet skrift">
<strong>B</strong>
</Toggle>

Varianter

Default

<Toggle aria-label="Kursiv">
<em>I</em>
</Toggle>

Outline

<Toggle variant="outline" aria-label="Understreking">
<span style={{ textDecoration: "underline" }}>U</span>
</Toggle>

Størrelser

<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
<Toggle size="sm" aria-label="Liten">
  <strong>B</strong>
</Toggle>
<Toggle size="default" aria-label="Standard">
  <strong>B</strong>
</Toggle>
<Toggle size="lg" aria-label="Stor">
  <strong>B</strong>
</Toggle>
</div>

Verktøylinje-eksempel

<div style={{ display: "flex", alignItems: "center", gap: "0.25rem", border: "1px solid var(--color-neutral-border-default)", borderRadius: "0.375rem", padding: "0.25rem" }}>
<Toggle size="sm" aria-label="Fet skrift">
  <strong>B</strong>
</Toggle>
<Toggle size="sm" aria-label="Kursiv">
  <em>I</em>
</Toggle>
<Toggle size="sm" aria-label="Understreking">
  <span style={{ textDecoration: "underline" }}>U</span>
</Toggle>
<Separator orientation="vertical" style={{ height: "1.5rem", margin: "0 0.25rem" }} decorative={false} />
<Toggle size="sm" aria-label="Venstrejuster">
  ≡
</Toggle>
<Toggle size="sm" aria-label="Midtstill">
  ≡
</Toggle>
</div>

Med tekst

<div style={{ display: "flex", gap: "0.5rem" }}>
<Toggle variant="outline" aria-label="Favoritt">
  ★ Favoritt
</Toggle>
<Toggle variant="outline" aria-label="Følg">
  Følg
</Toggle>
</div>

Bruksanbefalinger

Bruk for verktøylinjer og handlinger

Toggle passer for formateringsknapper, favoritter og andre handlinger der brukerens valg skal være synlig.

Ikke bruk for innstillinger

For innstillinger som 'mørk modus' eller 'varsler', bruk Switch. Toggle ser ut som en knapp og kommuniserer en handling.

Bruk alltid aria-label

Toggle har ofte kun et ikon — da er aria-label essensielt for skjermlesere.

Ikke bruk uten tilgjengelig navn

En toggle uten aria-label eller tekst er utilgjengelig for skjermlesere.

Tilgjengelighet

Bruker aria-pressed for å kommunisere av/på-tilstand
Enter eller Space toggler knappen
Støtter aria-label for skjermlesere
Deaktivert tilstand kommuniseres via disabled

Props

Prop	Type	Default	Beskrivelse
`variant`	`"default" \| "outline"`	`"default"`	Visuell stil
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Størrelse
`pressed`	`boolean`	—	Kontrollert av/på-tilstand
`defaultPressed`	`boolean`	`false`	Starttilstand (ukontrollert)
`onPressedChange`	`(pressed: boolean) => void`	—	Kalles når tilstanden endres
`disabled`	`boolean`	`false`	Deaktiver knappen