Бейдж

Бейдж оборачивает элемент и прикалывает метку к его верхнему углу: непрочитанные сообщения на кнопке входящих, точка «в сети» на аватаре. То, что он помечает, передаётся ему как потомки.

Простой бейдж

4AL12

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ content: 4 }, button({ variant: 'soft', color: 'neutral' }, 'Входящие')),
  badge({ content: 12 }, avatar({ name: 'Ada Lovelace' })),
)

Цвета

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')),
)

Максимум

Значение больше max рисуется как n+, поэтому бейдж никогда не разрастается настолько, чтобы перекосить то, на чём он сидит.

999+250

stack({ direction: 'row', gap: 'xl', align: 'center', wrap: true },
  badge({ content: 9 }, button({ variant: 'soft', color: 'neutral' }, 'Девять')),
  badge({ content: 250 }, button({ variant: 'soft', color: 'neutral' }, 'Обрезано до 99')),
  badge({ content: 250, max: 999 }, button({ variant: 'soft', color: 'neutral' }, 'max: 999')),
)

Точка

Точка говорит «что-то изменилось», не уточняя, насколько. Дайте ей label: голая точка ничего не значит для скринридера, поэтому без подписи она полностью скрыта из дерева доступности.

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ dot: true, color: 'success', label: 'В сети' }, avatar({ name: 'Ada Lovelace' })),
  badge({ dot: true, color: 'warning', label: 'Требует внимания' },
    iconButton({
      label: 'Настройки',
      variant: 'soft',
      color: 'neutral',
      icon: icon('settings'),
    }),
  ),
)

Подпись к счётчику

Голое число вне контекста двусмысленно. label становится доступным именем бейджа, и он читается как «4 непрочитанных сообщения», а не просто «4».

badge({ content: 4, label: '4 непрочитанных сообщения' },
  button({ variant: 'soft', color: 'neutral' }, 'Входящие'),
)

Менять счётчик

Счётчик — это то число на странице, которое скорее всего изменится, пока она открыта. setBadge() обрезает его по max, как это сделал сервер, ведёт вместе с ним объявляемый текст и убирает опустевший бейдж из дерева доступности — так бейдж и исчезает.

Объявляемый текст — это проза сайта, поэтому передавайте его всякий раз, когда он у бейджа есть:

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

Или из вашего собственного модуля, если он и так уже работает:

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

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

Пропсы

Проп	Тип	По умолчанию	Описание
`content`	`string \| number`	—	Что показывает бейдж. Игнорируется, если задан dot.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'danger'`	Цвет бейджа.
`dot`	`boolean`	`false`	Маленькая точка вместо значения.
`max`	`number`	`99`	Значения больше этого рисуются как n+.
`label`	`string`	—	Доступное имя самого бейджа.