'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Avisos
NotificationCenter
Una campana con el número de notificaciones sin leer que abre la lista: marcar una o todas como leídas, descartar, ir a la acción. Un panel bajo la campana, o un cajón en pantallas pequeñas.
import { NotificationCenter } from '@alea-design/ui';
Ejemplos
Campana de notificaciones
Una campana con el número de sin leer; abre la lista. Marca una o todas como leídas, descarta, o ve a la acción.
Cuatro tonos
Info, éxito, advertencia y peligro definen el icono y su color; los lectores de pantalla oyen el tono antes del título.
Estado vacío
Sin nada que mostrar, el panel lo dice. Cada texto es una etiqueta que puedes cambiar.
Controlado
La lista es tuya. Cada cambio vuelve por onChange y por los callbacks de cada acción; las notificaciones nuevas sin leer se anuncian a los lectores de pantalla.
Estilos con CSS por grupo
Con la importación única de la hoja de estilos, @alea-design/ui/styles.css, no hace falta nada más. Si importas las hojas de estilo por grupo, NotificationCenter tiene su propio grupo: importa @alea-design/ui/css/notification.css junto a base.css. Sin él, el panel se ve sin estilos y roto.
El panel también dibuja un Button, un Badge, un EmptyState y un Popover o Drawer, así que también hay que importar los grupos button, display, data y overlay. dist/css/groups.json los lista en requires del grupo notification, y lista los componentes que estiliza cada grupo.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-accent-subtle…--alea-border…--alea-status-danger…--alea-status-danger-bg…--alea-status-info…--alea-status-info-bg…--alea-status-success…--alea-status-success-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface-hover…--alea-text…--alea-text-muted…--alea-text-soft…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…--alea-space-8…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-in…--alea-motion-ease-out…
Component
--alea-focus-ring…
Props
NotificationCenter props
Una campana con el número de notificaciones sin leer que abre la lista: leer una o todas, descartar, ir a la acción. Un panel bajo la campana, o un cajón en pantallas pequeñas. La lista es tuya; cada cambio vuelve por onChange. Las flechas se mueven entre notificaciones, Escape cierra y el foco vuelve a la campana, y las notificaciones nuevas sin leer se anuncian.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | NotificationItem[] | Las notificaciones, la más reciente primero. El componente nunca las cambia: informa de cada cambio. | |
announce | boolean | true | Anuncia las notificaciones nuevas sin leer a los lectores de pantalla. Por defecto true. |
className | string | ninguno | Clases extra para el elemento raíz. |
defaultOpen | boolean | false | Empieza abierto (no controlado). |
isOpen | boolean | false | Abre o cierra el panel (controlado). |
labels | Partial<NotificationLabels> | ninguno | Textos propios: la campana, los botones, el estado vacío y los anuncios. |
max | number | 99 | La insignia muestra max+ por encima de este número. Por defecto 99. |
motion | MotionProp | ninguno | Cómo entra y sale el panel: un preajuste, false para ninguno, u opciones. |
onAction | ((item: NotificationItem) => void) | ninguno | Se llama al pulsar la acción de una notificación. |
onChange | ((items: NotificationItem[]) => void) | ninguno | Se llama con la lista siguiente tras cualquier cambio (leer, leer todas, descartar). |
onDismiss | ((item: NotificationItem) => void) | ninguno | Se llama con la notificación que se descartó. |
onMarkAllRead | ((items: NotificationItem[]) => void) | ninguno | Se llama al pulsar "marcar todas como leídas", con las notificaciones que estaban sin leer. |
onMarkRead | ((item: NotificationItem) => void) | ninguno | Se llama con la notificación que se marcó como leída. |
onOpenChange | ((isOpen: boolean) => void) | ninguno | Se llama cuando el panel se abre o se cierra. |
placement | "bottom end" | "bottom start" | "bottom" | "top" | "top start" | "top end" | "bottom end" | Dónde se abre el popover. Por defecto abajo al final. |
presentation | "auto" | "popover" | "drawer" | "auto" | popover (un panel bajo la campana), drawer (una hoja desde abajo) o auto: un cajón en pantallas pequeñas. Por defecto auto. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
placementbottom endbottom startbottomtoptop starttop endpresentationautopopoverdrawer- Estados
- Keyboard focusHover (CSS)
- Motion
- Acepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-notifs.alea-notifs-head.alea-notifs-title.alea-notifs-empty.alea-notifs-list.alea-notif-out.alea-notif.alea-notif-inner.alea-notif-icon.alea-notif-body.alea-notif-title.alea-notif-text- Atributos data
data-tone=successdata-tone=warningdata-tone=dangerdata-unread
Accesibilidad
- La campana se nombra con el número: "Notificaciones, 3 sin leer". La insignia se oculta a los lectores de pantalla para que el número no se lea dos veces.
- El panel es un diálogo con su título como nombre; Escape lo cierra y el foco vuelve a la campana.
- Cada notificación es un elemento de lista que dice si está sin leer y su tono antes del título.
- Una notificación nueva sin leer se anuncia con cortesía, nunca al cargar y nunca las ya leídas.
- Las horas son elementos time con la fecha exacta; el texto relativo sigue el idioma y se actualiza mientras el panel está abierto.
- Al descartar, el foco pasa a la notificación siguiente, o al estado vacío si era la última.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Abre el panel desde la campana |
| Arriba o Flecha abajo | Notificación anterior o siguiente |
| Inicio o Fin | Primera o última notificación |
| Tab | Recorre los botones de la notificación actual y luego pasa al siguiente control |
| Esc | Cierra el panel y vuelve a la campana |
Qué hacer y qué evitar
Hacer
- Mantén los títulos cortos y pon el detalle en la descripción.
- Da a cada notificación una acción como máximo, redactada como verbo.
- Guarda la lista en tu propio estado y actualízala desde onChange.
Evitar
- No lo uses para mensajes que necesitan respuesta ahora: usa Dialog o Alert.
- No colorees una notificación solo por su importancia; el tono también define el icono y la palabra que se escucha.
En Figma
Las propiedades de los componentes de Figma, generadas desde el kit, así que siempre coinciden con él. La última columna es la prop de React que representa cada una.
Notification item · 8 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Tone | Variant | Info, Success, Warning, Danger | Info | sin prop de React |
| Status | Variant | Unread, Read | Unread | sin prop de React |
| Title | Text | - | Deploy finished | sin prop de React |
| Description text | Text | - | The build is live on production. | sin prop de React |
| Time | Text | - | 8 min ago | sin prop de React |
| Action label | Text | - | View | sin prop de React |
| Description | Boolean | - | true | sin prop de React |
| Action | Boolean | - | true | sin prop de React |
Notification bell · 1 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Badge | Boolean | - | true | items |
| Open | Boolean | - | false | isOpen, defaultOpen |
Componentes anidados expuestos en él: Trigger, Badge
Notification center · 4 variantes
| Propiedad de Figma | Tipo | Valores | Por defecto | Prop de React |
|---|---|---|---|---|
| Presentation | Variant | Popover, Drawer | Popover | presentation |
| Content | Variant | List, Empty | List | items |
| Empty title | Text | - | You are all caught up | labels |
| Empty description | Text | - | New notifications will show up here. | labels |