Toasts, alertas, banners de estado, diálogos modais e de confirmação do Design System — props principais e exemplos em código.
Os componentes desta página dão resposta ao utilizador: confirmam uma ação, avisam de um erro ou pedem uma decisão. Todos são IGRP* (Horizon) e precisam de 'use client'.
Secção em construção
Esta página cobre os componentes principais; o resto do catálogo será completado. Para configurar estes componentes no Studio (sem código), vê Widgets do Page Builder.
Toasts
useIGRPToast
Hook que mostra notificações temporárias (toasts, sobre o sonner). Precisa de um IGRPToaster montado uma vez no layout da aplicação.
O código gerado declara const { igrpToast } = useIGRPToast() e usa-o nas ações (por exemplo, depois de submeter um formulário). O hook devolve igrpToast(props) e os atalhos success, error, info, warning, loading e dismiss.
Prop de igrpToast | Tipo | Por defeito | Descrição |
|---|---|---|---|
type | "default" | "success" | "error" | "info" | "warning" | "loading" | "default" | Tipo de toast |
title | ReactNode | "Notification" | Título |
description | ReactNode | — | Texto por baixo do título |
duration | number | 4000 (success), 6000 (error) | Tempo visível, em ms |
promise | Promise<T> | — | Acompanha uma promessa (loading → success/error) |
loading / success / error | ReactNode ou função | — | Mensagens dos três estados de promise |
// layout — uma vez
<IGRPToaster richColors position="top-right" />
// componente
const { igrpToast, success } = useIGRPToast();
igrpToast({ type: 'error', title: 'Erro ao gravar', description: 'Tenta de novo.' });
success('Registo gravado');
igrpToast({
promise: guardar(dados),
loading: 'A gravar…',
success: 'Gravado',
error: (e) => (e instanceof Error ? e.message : 'Falhou'),
});Alertas
IGRPAlert
Caixa de mensagem inline (informação, aviso, erro) com ícone e link opcional. Com color="destructive" é anunciada como role="alert"; nos restantes casos como role="status".
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
variant | "solid" | "soft" | "outline" | "solid" | Estilo |
color | "primary" | "success" | "destructive" | "warning" | "info" | "secondary" | "indigo" | "primary" | Cor (escolhe também o ícone por defeito) |
showIcon | boolean | true | Mostra o ícone |
iconName | string | ícone da color | Ícone Lucide |
showLink | boolean | — | Mostra um link à direita |
label / linkUrl | string | "link" / — | Texto e URL do link |
children | ReactNode | — | Conteúdo |
<IGRPAlert variant="soft" color="warning">
O prazo de submissão termina amanhã.
</IGRPAlert>IGRPStatusBanner
Faixa de estado (Custom) que junta um IGRPAlert com um IGRPBadge — por exemplo, o estado de um pedido. No Page Builder é o widget Status Banner.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
text | string | "Insert our Text here" | Texto principal |
variant / color | IGRPColorRole / IGRPColorVariants | "soft" / "success" | Estilo e cor da faixa |
badgeText | string | "Badge Text" | Texto do badge |
badgeVariant / badgeColor | IGRPColorRole / IGRPColorVariants | "outline" / "primary" | Estilo e cor do badge |
<IGRPStatusBanner text="Pedido em análise" color="info" badgeText="Pendente" badgeColor="warning" />Diálogos
IGRPModalDialog
Janela modal para conteúdo ou formulários, composta por partes: IGRPModalDialog (raiz, open/onOpenChange), IGRPModalDialogTrigger, IGRPModalDialogContent, IGRPModalDialogHeader, IGRPModalDialogTitle, IGRPModalDialogDescription, IGRPModalDialogFooter e IGRPModalDialogClose. No Studio é o Widget Modal.
| Prop | Em | Tipo | Por defeito | Descrição |
|---|---|---|---|---|
open / onOpenChange | raiz | boolean / (open) => void | — | Controlo do estado (opcional) |
size | Content | "sm" | "md" | "lg" | "xl" | "full" | "md" | Largura máxima |
showCloseButton | Content | boolean | true | Botão de fechar no canto |
stickyHeader | Header | boolean | — | Cabeçalho fixo ao fazer scroll |
stickyFooter | Footer | boolean | — | Rodapé fixo ao fazer scroll |
<IGRPModalDialog>
<IGRPModalDialogTrigger asChild>
<IGRPButton>Ver detalhe</IGRPButton>
</IGRPModalDialogTrigger>
<IGRPModalDialogContent size="lg">
<IGRPModalDialogHeader>
<IGRPModalDialogTitle>Detalhe do registo</IGRPModalDialogTitle>
<IGRPModalDialogDescription>Dados do registo selecionado.</IGRPModalDialogDescription>
</IGRPModalDialogHeader>
{/* conteúdo */}
<IGRPModalDialogFooter>
<IGRPModalDialogClose asChild>
<IGRPButton variant="outline">Fechar</IGRPButton>
</IGRPModalDialogClose>
</IGRPModalDialogFooter>
</IGRPModalDialogContent>
</IGRPModalDialog>IGRPAlertDialog
Diálogo de confirmação (por exemplo, antes de apagar), com ícone, título, descrição e botões de ação e cancelar. Não tem trigger: abre e fecha com open/onOpenChange.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
open / onOpenChange | boolean / (open) => void | — | Estado do diálogo |
variant | IGRPColorVariants | "primary" | Cor do ícone e do botão de ação |
title / description | string | — | Texto do diálogo |
actionLabel / cancelLabel | string | traduções do DS | Texto dos botões |
onAction / onCancel | () => void | — | Chamadas antes de fechar |
showCancel | boolean | true | Mostra o botão cancelar |
iconName / iconPlacement | string / "start" | "center" | "AirVent" / "start" | Ícone e posição — indica sempre o iconName |
const [open, setOpen] = useState(false);
<IGRPAlertDialog
open={open}
onOpenChange={setOpen}
variant="destructive"
iconName="Trash2"
title="Apagar registo?"
description="Esta ação não pode ser desfeita."
actionLabel="Apagar"
onAction={apagar}
/>Outros componentes
| Componente | Para quê | Widget no Studio |
|---|---|---|
IGRPBanner | Faixa de cookies (variant="cookie", fixa em baixo) ou de anúncio (variant="announcement") | Banner |
IGRPNotification | Notificação inline com ícone por tipo (default, error, info, success, warning) e link | Notification |
IGRPLoadingSpinner | Spinner centrado para estados de carregamento, com label acessível | Loading Spinner |
Skeleton (Primitive) | Marcador de conteúdo enquanto os dados carregam | Skeleton |
Progress (Primitive) | Barra de progresso | Progress |
Empty (Primitive) | Estado vazio (sem resultados, sem dados) | Empty |
Última atualização: