Banner — Sinapse Design System

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'

export function AlertExample() {
  return (
    <Alert>
      <AlertTitle>Manutenção programada</AlertTitle>
      <AlertDescription>
        O sistema ficará indisponível sábado às 22h por até 30 minutos.
      </AlertDescription>
    </Alert>
  )
}

<script setup lang="ts">
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@/components/ui/alert'
</script>

<template>
  <Alert>
    <AlertTitle>Manutenção programada</AlertTitle>
    <AlertDescription>
      O sistema ficará indisponível sábado às 22h por até 30 minutos.
    </AlertDescription>
  </Alert>
</template>

<div role="status" class="itps-banner itps-banner--info">
  <span class="itps-banner__icon" aria-hidden="true">
    <i class="ti ti-bulb" aria-hidden="true"></i>
  </span>
  <div class="itps-banner__content">
    <span class="itps-banner__title">Dica!</span>
    <span class="itps-banner__text">Sistema atualizado às 14h. Novas features no changelog.</span>
  </div>
  <a href="#" class="itps-banner__action">
    <span>Ver mudanças</span>
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </a>
</div>

Instalação

Instale o Alert da sua stack e rode o comando individual ITpS em seguida. O comando itps add banner é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, das classes copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add alert
pnpm dlx github:ITPS/sinapse-ui-cli add banner

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add alert
pnpm dlx github:ITPS/sinapse-ui-cli add banner

O comando individual adapta só este componente; não instala o catálogo inteiro.

Uso

Em React/Next com shadcn/ui e Vue3/Nuxt4 com shadcn-vue, use Alert, AlertTitle e AlertDescription quando o aviso fizer parte da interface da aplicação. Para uma faixa persistente no topo do layout, posicione o Alert no shell da página.

Para HTML ou wrappers finos, use itps-banner quando precisar do contrato copy-first full-width. Banner é persistente e global; não substitui validação de campo, Callout local ou Toast transitório.

Exemplos

Estrutura

Peça	React/Next e Vue3/Nuxt4	HTML
Container	`Alert`	`itps-banner`
Título	`AlertTitle`	`itps-banner__title`
Descrição	`AlertDescription`	`itps-banner__text`
Ícone	ícone no conteúdo	`itps-banner__icon`
Ação	botão ou link externo ao `Alert`	`itps-banner__action`

Status e ação

Use itps-banner--info, itps-banner--success, itps-banner--alert e itps-banner--error para representar severidade. Use ação apenas quando houver uma próxima etapa clara.

<div class="flex w-full flex-col gap-2">
  <div role="status" class="itps-banner itps-banner--success">
    <span class="itps-banner__icon" aria-hidden="true">
      <i class="ti ti-check" aria-hidden="true"></i>
    </span>
    <div class="itps-banner__content">
      <span class="itps-banner__title">Sucesso!</span>
      <span class="itps-banner__text">Prontuário salvo e sincronizado.</span>
    </div>
  </div>

  <div role="status" class="itps-banner itps-banner--alert">
    <span class="itps-banner__icon" aria-hidden="true">
      <i class="ti ti-alert-triangle" aria-hidden="true"></i>
    </span>
    <div class="itps-banner__content">
      <span class="itps-banner__title">Atenção!</span>
      <span class="itps-banner__text">Token de acesso expira em 3 dias.</span>
    </div>
    <a href="#" class="itps-banner__action">
      <span>Renovar agora</span>
      <i class="ti ti-arrow-right" aria-hidden="true"></i>
    </a>
  </div>

  <div role="alert" class="itps-banner itps-banner--error">
    <span class="itps-banner__icon" aria-hidden="true">
      <i class="ti ti-alert-circle" aria-hidden="true"></i>
    </span>
    <div class="itps-banner__content">
      <span class="itps-banner__title">Erro!</span>
      <span class="itps-banner__text">Falha de sincronização. Tentando novamente...</span>
    </div>
  </div>
</div>

API copy-first

Classe/atributo	Uso
`itps-banner`	Faixa persistente full-width.
`itps-banner--info`, `itps-banner--success`, `itps-banner--alert`, `itps-banner--error`	Status visual.
`itps-banner__icon`, `itps-banner__content`, `itps-banner__title`, `itps-banner__text`, `itps-banner__action`	Anatomia interna.
`role="status"`	Avisos persistentes e informativos.
`role="alert"`	Falhas que precisam ser anunciadas imediatamente.
`aria-hidden="true"`	Esconde ícones decorativos de tecnologias assistivas.

Acessibilidade

Use role="status" para mensagens informativas persistentes e role="alert" somente quando a falha precisar interromper a fila de anúncio. Mantenha ícones com aria-hidden="true" e não dependa só da cor para comunicar estado.

O texto da ação deve ser específico, como Ver mudanças ou Renovar agora. Evite empilhar muitos banners; mais de dois avisos globais competem entre si.