Badge

Ein Badge umschließt etwas und heftet ihm oben in die Ecke eine Markierung: ungelesene Nachrichten auf einem Posteingang-Button, ein Online-Punkt auf einem Avatar. Was es markiert, bekommt es als Kinder.

Einfaches Badge

4AL12

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ content: 4 }, button({ variant: 'soft', color: 'neutral' }, 'Posteingang')),
  badge({ content: 12 }, avatar({ name: 'Ada Lovelace' })),
)

Farben

33333

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 3, color: 'primary' }, button({ variant: 'soft', color: 'neutral' }, 'Primary')),
  badge({ content: 3, color: 'neutral' }, button({ variant: 'soft', color: 'neutral' }, 'Neutral')),
  badge({ content: 3, color: 'success' }, button({ variant: 'soft', color: 'neutral' }, 'Success')),
  badge({ content: 3, color: 'warning' }, button({ variant: 'soft', color: 'neutral' }, 'Warning')),
  badge({ content: 3, color: 'danger' }, button({ variant: 'soft', color: 'neutral' }, 'Danger')),
)

Maximum

Eine Zahl über max erscheint als n+, damit ein Badge nie so breit wird, dass es das Element aus dem Gleichgewicht bringt, auf dem es sitzt.

999+250

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 9 }, button({ variant: 'soft', color: 'neutral' }, 'Neun')),
  badge({ content: 250 }, button({ variant: 'soft', color: 'neutral' }, 'Bei 99 gedeckelt')),
  badge({ content: 250, max: 999 }, button({ variant: 'soft', color: 'neutral' }, 'max: 999')),
)

Punkt

Ein Punkt sagt „etwas hat sich geändert“, ohne zu sagen, wie viel. Gib ihm ein label — ein nackter Punkt bedeutet einem Screenreader nichts, deshalb bleibt er ohne Label vollständig aus dem Accessibility-Baum heraus.

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ dot: true, color: 'success', label: 'Online' }, avatar({ name: 'Ada Lovelace' })),
  badge({ dot: true, color: 'warning', label: 'Braucht Aufmerksamkeit' },
    iconButton({
      label: 'Einstellungen',
      variant: 'soft',
      color: 'neutral',
      icon: icon('settings'),
    }),
  ),
)

Die Zahl beschriften

Eine nackte Zahl ist ohne Kontext mehrdeutig. label wird zum zugänglichen Namen des Badges, sodass es als „4 ungelesene Nachrichten“ vorgelesen wird statt nur „4“.

badge({ content: 4, label: '4 ungelesene Nachrichten' },
  button({ variant: 'soft', color: 'neutral' }, 'Posteingang'),
)

Die Zahl ändern

Eine Zahl ist das, was sich auf einer offenen Seite am ehesten ändert. setBadge() deckelt sie bei max, so wie es der Server tat, führt den angesagten Text mit, und nimmt ein geleertes Badge aus dem Accessibility-Baum — so verschwindet ein Badge.

Der angesagte Text ist die Prosa der Seite — gib ihn mit, sobald das Badge einen hat:

button({ onclick: "import('/su/badge.js').then(m=>m.set('inbox',0))" }, 'Mark all read')

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

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

setBadge('inbox', 7, { label: '7 unread messages' })

Props

Prop	Typ	Standard	Beschreibung
`content`	`string \| number`	—	Was das Badge zeigt. Wird ignoriert, wenn dot gesetzt ist.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'danger'`	Farbe des Badges.
`dot`	`boolean`	`false`	Ein kleiner Punkt statt eines Werts.
`max`	`number`	`99`	Zahlen darüber erscheinen als n+.
`label`	`string`	—	Zugänglicher Name des Badges selbst.