Toggle-Button

Ein Toggle-Button ist an oder aus und sagt das mit aria-pressed. Fett in einem Texteditor, ein aktiver Filter, ein gerade sichtbares Panel.

Es steckt kein verstecktes Input dahinter: aria-pressed ist der ganze Zustand, ein serverseitig gerenderter Toggle zeigt also eine Einstellung, und setPressed() ist das, was sie ändert. Greif zu checkbox(), wenn es in ein Formular gehört, und zu toggle() — dem Schalter —, wenn es eine Einstellung in einer Liste ist.

Einfacher Toggle

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Fett'),
  toggleButton('Kursiv'),
  toggleButton('Unterstrichen'),
)

Varianten

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline an'),
    toggleButton({ variant: 'outline' }, 'Outline aus'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost an'),
    toggleButton({ variant: 'ghost' }, 'Ghost aus'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft an'),
    toggleButton({ variant: 'soft' }, 'Soft aus'),
  ),
)

Größen

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Klein'),
  toggleButton({ size: 'md', pressed: true }, 'Mittel'),
  toggleButton({ size: 'lg', pressed: true }, 'Groß'),
)

Mit Icons

Ein Toggle nur aus einem Icon braucht einen zugänglichen Namen — übergib aria-label, das an den Button durchfällt.

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': 'Fett',
    title: 'Fett',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': 'Kursiv',
    title: 'Kursiv',
    startIcon: icon('italic'),
  }),
)

Deaktiviert

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'An, gesperrt'),
  toggleButton({ disabled: true }, 'Aus, gesperrt'),
)

Ihn etwas tun lassen

Ein Aufruf kippt das Attribut; die Gestaltung folgt ihm. In einer toggleGroup() mit nur einer Wahl lässt er zugleich die Geschwister los.

toggleButton({ onclick: "import('/su/pressed.js').then(m=>m.set(this))" }, 'Bold')

Oder aus deinem eigenen Modul, wenn ohnehin schon eines läuft:

import { setPressed } from 'sitelo/ui/client'

setPressed('bold')

Props

Prop	Typ	Standard	Beschreibung
`pressed`	`boolean`	`false`	Setzt aria-pressed. Danach ändert es setPressed().
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Wie der nicht gedrückte Button aussieht.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dieselbe Skala wie bei button().
`disabled`	`boolean`	`false`	Deaktiviert den Button.

Alles Weitere fällt an button() durch — startIcon, endIcon, onclick und der Rest. Für eine ganze Reihe davon siehe toggleGroup().