Todos los componentes (204)

Bandeja de avisos

Capas · NotificationTray

Qué es y cuándo usarlo

La campana con el contador de lo que está sin leer y, al pulsarla, el panel con los últimos avisos y su antigüedad («hace 4 minutos»). Va en la barra de arriba, normalmente en las actions de TopBar.

Cuándo usarlo

Lo que ha pasado mientras no se miraba: pedidos, pagos, existencias que se acaban.
onMarkAllRead pone «Marcar todo como leído» en el pie, apagado si ya no queda nada sin leer; footer añade lo que haga falta al lado («Ver todos los avisos»).
link en un aviso lo convierte en un enlace de verdad; sin él, es un botón que avisa con onAlertOpen y cierra el panel. Los dos avisan con onAlertOpen al pulsarse.
empty es lo que se ve sin avisos («No tienes avisos» por defecto).

Cuándo no

Contar algo en el momento en que pasa, sin guardarlo: una notificación con useNotifications.
Un aviso de la aplicación entera que tiene que verse sin abrir nada: GlobalAlert.

Teclado: la campana es un botón (Intro o Espacio abren el panel). Dentro, Tab recorre los avisos y el pie. Escape cierra y el foco vuelve a la campana.

Accesibilidad: el número de sin leer está en el nombre del botón («Avisos, 3 sin leer»), no solo en el globo rojo: se sabe si hay algo nuevo al llegar tabulando. El globo se corta en «9+», pero el nombre dice el número exacto. Cada aviso sin leer lo dice con palabras («· sin leer»), no solo con un punto de color. El panel es un diálogo llamado «Avisos».

Aspecto fino: el ancho del panel lo pone size (18, 22 o 28 rem); el resto, con las clases amset-tray__* (campana, globo, lista, aviso). open y onOpenChange la abren desde fuera: un atajo, o un aviso que acaba de llegar.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se cuenta la antigüedad de cada aviso.

Cómo se ve

Pulsa la campana: 3 avisos sin leer.

<NotificationTray
  alerts={[
    { key: 'pedido-1042', title: 'Pedido 1042 enviado', detail: 'Sale hoy del almacen', date: '2026-10-14T09:56:00+02:00' },
    { key: 'factura-0118', title: 'Factura F-2026-0118 vencida', date: '2026-10-10T09:00:00+02:00', read: true },
  ]}
  onAlertOpen={abrirAviso}
  onMarkAllRead={marcarTodo}
/>

Props

Se importa con import { NotificationTray } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`alerts`obligatoria	`readonly TrayAlert[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`empty`	`string`	—
`footer`	`ReactNode`	Pie del panel: «Ver todos los avisos».
`onAlertOpen`	`(key: string) => void`	Marcar uno como leido, o ir a el. Recibe la clave.
`onMarkAllRead`	`() => void`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	Para abrir la bandeja desde fuera (un atajo, un aviso que acaba de llegar).
`size`	`"sm" \| "md" \| "lg"`	El ancho del panel: 18, 22 o 28 rem.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: