componente · v0.2.0+

Callout

Aside box con kind semántico (info / ok / warn / err). Border-left 3px coloreado + bg translúcido + icon + título + body.

Las 4 variantes semánticas

Pro tip
El paso 4 es no-negociable. Si saltas a ejecutar, pierdes el músculo.
Lo que mejora
Identidad de "engineering deck" más fuerte. Mejor contraste para code y terminal.
Cuidado con la lectura ingenua
Los benchmarks miden tareas pequeñas. Mantenibilidad a 6 meses no aparece aquí.
No hagas esto
Subir el QR como imagen sin alt — pierdes accesibilidad y compatibilidad con readers.
uso
<Callout kind="info" title="Pro tip">
  El paso 4 es <strong>no-negociable</strong>.
</Callout>

Override del icon

Custom
Cualquier emoji o glyph sustituye al icono por defecto del kind.
uso
<Callout kind="info" title="Custom" icon="🚀">...</Callout>

Props

PropTipoDefaultDescripción
kind'info' | 'ok' | 'warn' | 'err''info'Paleta semántica.
titlestring''Título del callout (opcional).
iconstring(según kind: 💡 ✓ ⚠️ ✗)Override del icono por defecto.
childrenSnippet—Body content (acepta <strong> y <code>).