Button

Ein Button ist das, worauf man klickt, damit etwas passiert. button() rendert einen echten <button> mit type="button" — einen davon in ein Formular zu setzen schickt es also nicht versehentlich ab.

Einfacher Button

Der Standard ist solid, primary, mittelgroß. Kinder sind das Label, alles andere ist eine Prop.

stack({ direction: 'row', gap: 'md' },
  button('Eins'),
  button('Zwei'),
  button('Drei'),
)

Varianten

Fünf Stufen der Betonung — von der einen Handlungsaufforderung der Seite bis hinunter zu etwas, das sich wie ein Link liest.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Farben

Jede thematisierte Komponente schöpft aus denselben fünf Paletten, deshalb passen ein color: 'danger'-Button und ein color: 'danger'-Hinweis zusammen, ohne voneinander zu wissen.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Größen

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

Icons

Übergib beliebiges SVG-Markup als startIcon oder endIcon. Icons werden in em bemessen und skalieren daher mit dem Button, statt eine eigene Größe zu brauchen.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Neue Seite'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Weiter'),
)

Icon-Button

iconButton() ist ein quadratischer Button mit einem einzigen Icon. Sein label ist Pflicht — es wird zum zugänglichen Namen, den das Icon allein nicht liefern kann, und zum Tooltip beim Überfahren.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Hinzufügen', icon: icon('plus') }),
  iconButton({ label: 'Bearbeiten', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Löschen', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Ladend und deaktiviert

loading tauscht einen Spinner ein und setzt aria-busy; das Label bleibt stehen, damit der Button mitten in der Aktion nicht die Breite wechselt.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Speichert'),
  button({ variant: 'outline', loading: true }, 'Prüft'),
  button({ disabled: true }, 'Deaktiviert'),
  button({ variant: 'soft', disabled: true }, 'Deaktiviert'),
)

Links

Gib einem Button ein href, und er rendert stattdessen ein <a> — das richtige Element für etwas, das navigiert. Anker kennen keinen Deaktiviert-Zustand, deshalb wird disabled zu aria-disabled und nimmt es aus der Tab-Reihenfolge.

Doku lesen Komponenten Schlichter Link

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/de/docs' }, 'Doku lesen'),
  button({ href: '/de/docs/ui', variant: 'outline' }, 'Komponenten'),
  button({ href: '/de/docs', variant: 'link' }, 'Schlichter Link'),
)

Volle Breite

button({ block: true, size: 'lg' }, 'Website deployen')

Props

Alles, was hier nicht steht, fällt als Attribut an das gerenderte Element durch — id, data-*, onclick, popovertarget und der Rest.

Prop	Typ	Standard	Beschreibung
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Wie viel Betonung der Button trägt.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Aus welcher Palette geschöpft wird.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Höhe, Innenabstand und Labelgröße.
`href`	`string`	—	Rendert ein <a> statt eines <button>.
`startIcon`	`string`	—	Markup vor dem Label.
`endIcon`	`string`	—	Markup nach dem Label.
`loading`	`boolean`	`false`	Zeigt einen Spinner und setzt aria-busy.
`disabled`	`boolean`	`false`	Deaktiviert den Button oder markiert einen Link als aria-disabled.
`block`	`boolean`	`false`	Dehnt sich auf die volle Breite des Containers.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Nur für die <button>-Form.

iconButton() nimmt dieselben Props plus ein verpflichtendes label und ein icon.