Callout — Sinapse Design System

Sizes

Três escalas. sm = 1 linha inline, md = title+desc, lg = link à direita.

Salvo automaticamente

Prontuário sincronizado

Última sincronização há 2 minutos.

Ver log

Backup configurado

Backups diários às 02h. Próximo agendamento amanhã.

Configurar

<Callout size="sm" title="Salvo automaticamente" linkText="Detalhes" linkHref="#" />
<Callout size="md" title="Prontuário sincronizado" description="Última sincronização há 2 minutos." linkText="Ver log" linkHref="#" />
<Callout size="lg" title="Backup configurado" description="Backups diários às 02h." linkText="Configurar" linkHref="#" />

<template>
<div class="itps-callout">
  <span class="material-symbols-outlined shrink-0">info</span>
  <p class="font-medium flex-1">Salvo automaticamente</p>
  <a href="#" class="itps-link text-sm">Detalhes</a>
</div>

<div class="itps-callout">
  <span class="material-symbols-outlined shrink-0">info</span>
  <div class="flex-1">
    <p class="font-medium">Prontuário sincronizado</p>
    <p class="text-sm text-muted-foreground">Última sincronização há 2 minutos.</p>
  </div>
  <a href="#" class="itps-link text-sm">Ver log</a>
</div>
</template>

export function Sizes() {
return (
  <>
    <div className="itps-callout">
      <span className="material-symbols-outlined shrink-0">info</span>
      <p className="font-medium flex-1">Salvo automaticamente</p>
      <a href="#" className="itps-link text-sm">Detalhes</a>
    </div>
    <div className="itps-callout">
      <span className="material-symbols-outlined shrink-0">info</span>
      <div className="flex-1">
        <p className="font-medium">Prontuário sincronizado</p>
        <p className="text-sm text-muted-foreground">Última sincronização há 2 minutos.</p>
      </div>
      <a href="#" className="itps-link text-sm">Ver log</a>
    </div>
  </>
);
}

<div class="itps-callout">
<span class="material-symbols-outlined shrink-0">info</span>
<p class="font-medium flex-1">Salvo automaticamente</p>
<a href="#" class="itps-link text-sm">Detalhes</a>
</div>

<div class="itps-callout">
<span class="material-symbols-outlined shrink-0">info</span>
<div class="flex-1">
  <p class="font-medium">Prontuário sincronizado</p>
  <p class="text-sm text-muted-foreground">Última sincronização há 2 minutos.</p>
</div>
<a href="#" class="itps-link text-sm">Ver log</a>
</div>

Statuses

Quatro variantes semânticas.

Dica

Use Tab para navegar entre campos.

Pronto

Documento enviado com sucesso.

Atenção

Verifique se os dados estão completos antes de salvar.

Erro

Não foi possível conectar ao servidor.

Tentar novamente

<Callout status="default" title="Dica" description="Use Tab para navegar entre campos." />
<Callout status="success" title="Pronto" description="Documento enviado com sucesso." />
<Callout status="alert" title="Atenção" description="Verifique se os dados estão completos antes de salvar." />
<Callout status="danger" title="Erro" description="Não foi possível conectar ao servidor." linkText="Tentar novamente" linkHref="#" />

Sem ícone

Suprime o círculo à esquerda quando o ícone for ruído.

Use teclas Cmd+K para abrir busca

<Callout title="Use teclas Cmd+K para abrir busca" showIcon={false} />

Props

Prop	Tipo	Default	Descrição
`status`	`'default' \| 'success' \| 'alert' \| 'danger'`	`'default'`	Variante semântica.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Densidade.
`title`	`string`	obrigatório	Título da mensagem.
`description`	`string`	—	Texto secundário. Não use em `sm`.
`linkText`	`string`	—	Texto do CTA.
`linkHref`	`string`	—	URL do CTA.
`showIcon`	`boolean`	`true`	Exibe ícone semântico à esquerda.
`class`	`string`	—	Classes adicionais.