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;

Ver no Figma

Anatomia do componente

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.

Guidelines

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.

Variantes

O componente possui 5 variantes distintas que podem ser utilizadas de acordo com a mensagem que precisamos comunicar.

Neutral

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.

Primary

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.

Success

Essa variante tem conotação positiva, pode ser utitlizada para informar que uma ação realizada pela pessoa usuária foi realizada com sucesso.

Warning

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.

Danger

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.

Recomendação de uso

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

Componentes relacionados

Toast - Pode ser usado para notificar usuários em tom informacional, ou seja, apenas descreve que algo aconteceu ou está acontecendo.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/alert

Props

Additional props are passed to the <Alert> element. See div docs for a list of props accepted by the <Alert> element.

Alert

Name	Type	Default	Description
title	string		The content for the title of the alert.
appearance	'danger' 'neutral' 'primary' 'success' 'warning'	'neutral'	Change the visual style of the alert.
children*	React.ReactNode		The content of the alert.
onRemove	() => void;		Function to be passed on actioning the dismiss button.
show	boolean	'true'	Determines if the alert is shown or not.

Alert.Skeleton

Name	Type	Description
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.