Notificação

Uma mensagem flutuante flexível para feedback e atividade do produto - seis posições de viewport mais informação, sucesso, erro, icon personalizado, avatar, botão de ação e variantes de auto-despedimento cronometradas em um componente.

Instalação

Você pode adicionar o componente de notificação usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add notification

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Estados

Definir status para informações, sucesso ou erro. Cada estado fornece o papel de live-region semântico, ícone padrão, e cores de sotaque.

<Notification  status="information"  title="New version available"  description="Refresh to start using the latest dashboard updates."/>
<Notification  status="success"  title="Changes saved"  description="Your workspace settings have been updated."/>
<Notification  status="error"  title="Upload failed"  description="Check the file size and try again."/>

Ícones e avatares

Passar por qualquer ícone do Remix ícone, ou substituir o ícone por um avatar. As notificações de Avatar podem mostrar presença online, ocupada ou offline.

import { RiSparklingFill } from "@remixicon/react";
{/* Custom icon */}<Notification  icon={RiSparklingFill}  title="Custom icon"  description="Use any Remix icon."/>
{/* Avatar with presence */}<Notification  avatar={{    src: "/avatars/livia-saris.webp",    alt: "Livia Saris",    presence: "busy",  }}  title="Livia Saris"  timestamp="just now"  description="Mentioned you in the launch checklist."/>

Botões de ação

A actions array renderiza pequenos botões BoardUI e suporta variantes primárias, secundárias e de perigo.

<Notification  status="information"  title="Backup ready"  description="Your latest workspace backup is ready to download."  actions={[    { label: "Not now", variant: "secondary", onClick: dismiss },    { label: "Download", variant: "primary", onClick: download },  ]}/>

Posição

Utilizar o position aderente NotificationViewport para ancorar a pilha em qualquer canto ou centro horizontal do viewport do navegador.

import {  Notification,  NotificationViewport,} from "@/components/base/notification/notification";
<NotificationViewport position="top-center">  <Notification    status="information"    title="New version available"    description="Refresh to start using the latest dashboard updates."  /></NotificationViewport>
{/* Available positions:    top-left, top-center, top-right,    bottom-left, bottom-center, bottom-right */}

Demissão temporária

Definir autoDismissDuration em milissegundos para mostrar uma barra de contagem regressiva 3px sincronizada e descartar a notificação quando atingir o zero. NotificationViewport para portal de notificações repetidas para uma pilha suavemente animada na borda do viewport do navegador.

const [notifications, setNotifications] = useState([]);
function showNotification(variant) {  setNotifications((current) => [    ...current,    { id: crypto.randomUUID(), variant },  ]);}
<Button onClick={() => showNotification("success")}>Replay notification</Button><Button onClick={() => showNotification("information")}>Information</Button><Button onClick={() => showNotification("error")}>Error</Button><Button onClick={() => showNotification("avatar")}>With avatar</Button><Button onClick={() => showNotification("actions")}>With buttons</Button>
<NotificationViewport>  {notifications.map((notification) => (    <Notification      {...variants[notification.variant]}      key={notification.id}      autoDismissDuration={2500}      introDelay={0}      onDismiss={() =>        setNotifications((current) =>          current.filter((item) => item.id !== notification.id)        )      }    />  ))}</NotificationViewport>