Alert
El componente alert nos permite comunicar sobre cambios o condiciones especiales en páginas o secciones.
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;El componente se compone de un box con bordes redondeados, un icono, un botón opcional para cerrar y un slot que puede recibir otros componentes.
Usamos este componente cuando necesitamos notificar a la persona usuaria sobre un evento importante, o que requiere una acción para resolver un problema; para completar algún dato o aguardar una confirmación asíncrona.
El componente posee 5 variantes distintas que pueden ser utilizadas de acuerdo con el mensaje que debamos comunicar.
Esta variante tiene connotación neutral. Puede ser utilizada para comunicar información útil sin destaque visual, que ayude a la persona usuaria a entender una característica sobre el funcionamiento de su operación.
Esta variante tiene connotación neutral. Puede ser utilizada para comunicar información útil con destaque visual, que ayude a la persona usuaria a entender una característica sobre el funcionamiento de su operación.
Esta variante tiene connotación positiva. Puede ser utilizada para informar que una acción realizada por la persona usuaria fue ejecutada con éxito.
Esta variante tiene connotación intermedia. Puede ser utilizada para mostrar información relevante para la persona usuaria pero que no bloquea su operación, y no requiere atención inmediata.
Esta variante tiene connotación negativa. Puede ser utilizada para mostrar información crítica que está afectando la operación de la persona usuaria y requiere su atención para resolver el problema.
- Notificar que existe información o configuraciones incompletas en otra instancia
- Notificar que existen pagos pendientes en otra instancia
- Notificar que algún proceso está ocurriendo de forma asíncrona
- Toast - Puede ser usado para notificar personas usuarias de forma informativa. Esto es, simplemente describe algo que ocurrió o está ocurriendo.
Instalá el 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.
Alert
| Name | Type | Default | Description |
|---|---|---|---|
title | string | The content for the title of the alert. | |
appearance | 'danger' | '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 | Default | 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. |