Callout Card
Callout Card es un patrón que destaca contenido relevante o informativo dentro de la interfaz. Su propósito es captar la atención del usuario en momentos clave, reforzar una acción recomendada o proporcionar accesos directos a otras partes del producto. Es útil para mensajes breves con llamado a la acción o referencias contextuales.
import React from "react";
import { CalloutCard } from "@nimbus-ds/patterns";
import { BoxUnpackedIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => (
<CalloutCard
appearance="neutral"
title="Title"
subtitle="Subtitle"
icon={BoxUnpackedIcon}
/>
);
export default Example;
Instalá el componente via terminal.
npm install @nimbus-ds/callout-card
Callout Card
Utilizar el Callout Card para:
- Mostrar alertas informativas o recomendaciones contextuales que invite a la acción.
- Destacar acciones útiles o necesarias dentro de un flujo (como recomendaciones en onboardings o tutoriales).
Evitar usarlo en estos casos:
- Para mostrar errores críticos o bloqueantes (usar un Alert).
- Cuando el contenido requiere acciones múltiples.
- Si el mensaje es repetitivo o innecesario dentro del flujo.
- Foco en el flujo principal: Nunca debe bloquear la interacción, solo complementarla.
- Feedback visible y contextual: Aparece donde se necesita, reduciendo la necesidad de buscar ayuda externa.
- Asegurar contraste suficiente entre el patron y background de la interfaz.
- Incluir títulos y descripciones claras, sin depender únicamente del color en el caso de las variantes de estados (succes, warning, danger)
- Usar roles ARIA como aria-labelledby y aria-describedby.
- El foco debe pasar por la card si está en el flujo del teclado.
- Todos los accionables deben tener labels accesibles y estados visibles.
- En mobile, en la variante con link, asegurar un área de tap mínima de 44x44 px en sus accionables.
Callout Card incluye:
- Ícono (opcional)
- Título
- Descripción
- Link (opcional)
- Card
- Text
- Icon
- Link
- Tipo de intención:
- Neutral: Se utiliza para comunicar información útil o contextual sin destaque visual. Ideal para brindar tips, atajos o descripciones adicionales en interfaces donde se presenta información variada, sin generar foco o urgencia.
- Primary: Se utiliza para destacar contenido relevante que requiere mayor visibilidad dentro de un conjunto de mensajes. Ideal para guiar a la persona usuaria hacia acciones recomendadas, pasos clave o funcionalidades destacadas del producto.
- Success: Se utiliza para comunicar que una acción fue completada con éxito. Refuerza el flujo positivo de la experiencia, validando el progreso de la persona usuaria en procesos como integraciones, configuraciones o tutoriales.
- Warning: Se utiliza para alertar sobre condiciones que podrían afectar el uso correcto del producto, sin bloquear la operación. Es útil para anticipar problemas o advertir sobre configuraciones incompletas o poco recomendadas.
- Danger: Se utiliza para informar sobre situaciones críticas que afectan la funcionalidad esperada o la experiencia de uso. Requiere atención inmediata para corregir errores o evitar consecuencias negativas en el flujo de trabajo.
- With Link: Con link embebido
- Stressed: Con título y descripciones extensas
✅ Do
- Usar títulos concisos y claros.
- Incluir un CTA solo si es necesario.
- Adaptar la variante al tono del mensaje (informativo, éxito, error...).
- Mostrar el Callout Card cerca del contenido que complementa.
❌ Don't
- Repetir el mismo mensaje en diferentes pantallas.
- Usar más de una Callout Card por vista.
- Utilizar más de un link por Callout card
- Bloquear el flujo del usuario con contenido no descartable.
- Depender solo de íconos o colores para comunicar el mensaje.
Additional props are passed to the <CalloutCard> element. See div docs for a list of props accepted by the <CalloutCard> element.
CalloutCard
Name | Type | Default | Description |
---|---|---|---|
appearance* | 'danger' | CalloutCard color. | |
icon* | React.FC<IconProps> | The SVG contents to display in the Icon. | |
title* | string | Title. | |
subtitle* | string | Subtitle. | |
link | <Link /> | Slot intended to position the Callout Card link correctly. | |
onClick | () => void; | Event fired when clicking the component. |