Alert
O componente Alert nos permite comunicar sobre mudanças ou condições especiais em páginas ou seções.
import React from "react";
import { Alert } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Alert appearance="primary" title="Alert title">
Alert content
</Alert>
);
export default Example;O componente é composto por um box com cantos arredondados, além de um ícone, um botão de fechar opcional e um slot que pode receber outros componentes.
Utilizamos o componente quando precisamos notificar a pessoa usuária sobre um evento importante, ou que requer uma ação para resolver um problema, para completar algum dado ou aguardar uma confirmação assíncrona.
O componente possui 5 variantes distintas que podem ser utilizadas de acordo com a mensagem que precisamos comunicar.
Essa variante tem conotação neutra, pode ser utilizada para comunicar informações úteis sem destaque visual, que ajudem a pessoa usuária a entender um recurso sobre sua operação.
Essa variante tem conotação neutra, pode ser utilizada para comunicar informações úteis com detaque visual, que ajudem a pessoa usuária a entender um recurso sobre sua operação.
Essa variante tem conotação positiva, pode ser utitlizada para informar que uma ação realizada pela pessoa usuária foi realizada com sucesso.
Essa variante tem conotação intermediária, pode ser utilizada para mostrar informação relevante para a pessoa usuária mas que não bloqueia a sua operação, nem requer atenção imediata.
Essa variante tem conotação negativa, pode ser utilizada para mostrar informação crítica que está afetando a operação da pessoa usuária e requer sua atenção para resolver o problema.
- Notificar que existem informações ou configurações não preenchidas em outra instância
- Notificar que existem pagamentos pendentes em outra instância
- Notificar que algum processo está ocorrendo de forma assíncrona
- Toast - Pode ser usado para notificar usuários em tom informacional, ou seja, apenas descreve que algo aconteceu ou está acontecendo.
Instale o componente via terminal.
npm install @nimbus-ds/alertAdditional props are passed to the <Alert> element. See div docs for a list of props accepted by the <Alert> element.