Ir al contenido
sebs7n-ui2.10.0
FundamentosServer Component

CountBadge

El contador de un botón de ícono de barra —la campana con los no leídos—: un Badge variant="count" arriba a la derecha del ícono, con «99+».

Ver como .mdVer el código
import { CountBadge } from "sebs7n-ui/count-badge"

Ejemplos

En una barra

El contador va adentro del botón, arriba a la derecha del ícono. El número lo dice el nombre del botón: «Avisos, 3 sin leer». Con 0 no se dibuja; pasado 99 dice «99+».

import { BellIcon, InboxIcon } from "lucide-react"
import { Button } from "sebs7n-ui/button"
import { CountBadge, countLabel } from "sebs7n-ui/count-badge"
import { Toolbar, ToolbarButton } from "sebs7n-ui/toolbar"
import { useState } from "react"

function InToolbar() {
  const [unread, setUnread] = useState(3)
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Toolbar aria-label="Facturación">
        <span className="flex-1 px-2 text-headline text-label">Facturas</span>
        <ToolbarButton render={<Button aria-label={countLabel("Pendientes de cobro", 128, "facturas")} size="icon-sm" variant="plain" />}>
          <InboxIcon />
          <CountBadge count={128} />
        </ToolbarButton>
        <ToolbarButton render={<Button aria-label={countLabel("Avisos", unread, "sin leer")} size="icon-sm" variant="plain" />}>
          <BellIcon />
          <CountBadge count={unread} />
        </ToolbarButton>
      </Toolbar>
      <div className="flex gap-2">
        <Button onClick={() => setUnread(unread + 1)} size="sm" variant="secondary">
          Llega un aviso
        </Button>
        <Button onClick={() => setUnread(0)} size="sm" variant="secondary">
          Marcar todos como leídos
        </Button>
      </div>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

CountBadge

Hereda las props de <span>.

PropTipoPor defectoDescripción
count*number—La cantidad. Con 0 (o menos, o NaN) no se dibuja nada.
color"brand" | "gray" | "red" | "amber" | "green" | "blue" | "teal" | "purple" | "pink""red"Rojo por defecto, como el de las notificaciones.
maxnumber99Desde cuánto se escribe «99+». El nombre del botón dice el número real (countLabel).
classNamestring—Clases del contador (el anillo de otra superficie: ring-surface-header).

Teclado

—
No es interactivo: el botón que lo lleva es el que recibe el foco.

Accesibilidad

  • Es decorativo (aria-hidden): el número va en el nombre del botón, con countLabel("Notificaciones", 3, "sin leer") → «Notificaciones, 3 sin leer». Con 0 el nombre es solo «Notificaciones».
  • El nombre dice el número real aunque el contador diga «99+».
  • Un cambio del número no se anuncia: el nombre del botón se lee recién al enfocarlo. Si importa enterarse en el momento (llegó una notificación), la app lo avisa en una región viva, fuera del botón: <span role="status" className="sr-only">{aviso}</span>, montado desde el principio, con aviso = «2 notificaciones nuevas» cuando llegan. Solo lo nuevo, no cada cambio del total.
  • Rojo por defecto (red-800 con blanco, 4,5:1). El color no es el único dato: el número se lee.

Reglas de uso

  • Va adentro del Button de ícono (que ya es relative), después del ícono; también dentro de un ToolbarButton o del trigger de un menú.
  • Con 0 (o menos) no se dibuja. max cambia el tope (99 por defecto: «99+»).
  • El anillo del color de la barra (surface-bar) lo separa del ícono; sobre otra superficie, className="ring-surface-header".
  • Sin estado: sirve en un Server Component. Solo por subpath (sebs7n-ui/count-badge).

Relacionados

BadgeToolbarButton