Ficha
- Categoría
- Data display
- Nivel
- molécula
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:13732
- Fuente
design-system/componentes/Callout.md
Mensaje en línea dentro del contenido: lo que el usuario debe saber antes de actuar (reglas, límites, un problema con el micrófono o la conexión). El tono (warning · info · danger · positive) elige color e ícono a la vez: son una sola decisión semántica. No se cierra; es parte de la página.
Cuándo usarlo
- Reglas que cambian la calificación (errores críticos en Antes de empezar), límites, estados de micrófono o conexión (reglas/03 §03.7).
Cuándo NO usarlo
- Confirmaciones pasajeras (toast); el estado de un ítem (Badge); una decisión bloqueante (diálogo).
Anatomía
Caja radius-3x, padding 16/20, gap 12: Icon 20 del tono + columna con título (body/sm-strong, opcional) y texto (body/sm).
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
title | Title | texto | Estos errores bajan tu calificación al mínimo |
text | Text | texto | Dar un dato o una promesa sin respaldo · pedir claves, PIN o CVV · decir que hiciste algo que no hiciste. |
showTitle | Show title | boolean | true |
tone | Tone | warning · info · danger · positive | warning |
alert | — | role=alert cuando aparece como resultado de una acción | false |
Estados
Sin estados.
Accesibilidad
- role=note (o role=alert solo cuando aparece como resultado de una acción); el ícono es decorativo; el color nunca es la única pista: el título o el texto dicen el tono.
Contenido
El título dice la consecuencia en una línea; el texto dice qué exactamente o qué hacer; sin signos de exclamación.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).