Emblema

Um emblema envolve algo e prende-lhe um marcador ao canto superior: mensagens por ler num botão de caixa de entrada, um ponto de «online» num avatar. Aquilo que marca vai como filhos.

Emblema básico

4AL12

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

Cores

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

Máximo

Uma contagem acima de max aparece como n+, para que um emblema nunca cresça ao ponto de desequilibrar aquilo em que assenta.

999+250

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

Ponto

Um ponto diz «mudou alguma coisa» sem dizer quanto. Dá-lhe um label — um ponto sozinho não significa nada para um leitor de ecrã, por isso sem etiqueta fica totalmente escondido da árvore de acessibilidade.

stack({ direction: 'row', gap: 'xl', align: 'center' },
  badge({ dot: true, color: 'success', label: 'Online' }, avatar({ name: 'Ada Lovelace' })),
  badge({ dot: true, color: 'warning', label: 'Precisa de atenção' },
    iconButton({
      label: 'Definições',
      variant: 'soft',
      color: 'neutral',
      icon: icon('settings'),
    }),
  ),
)

Dar nome à contagem

Um número sozinho é ambíguo fora de contexto. label passa a ser o nome acessível do emblema, por isso lê-se «4 mensagens por ler» em vez de «4».

badge({ content: 4, label: '4 mensagens por ler' },
  button({ variant: 'soft', color: 'neutral' }, 'Caixa de entrada'),
)

Mudar a contagem

Uma contagem é o número de uma página com maior probabilidade de mudar enquanto ela está aberta. setBadge() corta-a em max tal como o servidor fez, mantém o texto anunciado com ela, e tira da árvore de acessibilidade um emblema esvaziado — é assim que um emblema desaparece.

O texto anunciado é a prosa do site, por isso passa-o sempre que o emblema tiver um:

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

Ou a partir do teu próprio módulo, quando já houver um a correr:

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

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

Props

Prop	Tipo	Predefinição	Descrição
`content`	`string \| number`	—	O que o emblema mostra. Ignorado quando dot está definido.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'danger'`	Cor do emblema.
`dot`	`boolean`	`false`	Um pequeno ponto em vez de um valor.
`max`	`number`	`99`	Contagens acima disto aparecem como n+.
`label`	`string`	—	Nome acessível do próprio emblema.