Botões, tipografia, ícones e imagens do Design System — props principais e exemplos em código, mais um resumo dos componentes de media.
Os componentes desta página mostram conteúdo: texto, títulos, ícones, imagens e as ações (botões). 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.
Ações
IGRPButton
Botão com ícone opcional e estado de carregamento. Dentro de um IGRPForm, um botão com type="submit" submete o formulário. No Page Builder é o widget Button.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
variant | "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "default" | Estilo |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Tamanho; os icon* mostram só o ícone |
showIcon | boolean | false | Mostra o ícone |
iconName | string | "ArrowLeft" | Ícone Lucide |
iconPlacement | "start" | "end" | "start" | Lado do ícone |
loading | boolean | false | Mostra um spinner e desativa o botão |
loadingText | string | tradução do DS | Texto durante o carregamento |
type | "button" | "submit" | "reset" | "button" | Tipo HTML |
<IGRPButton showIcon iconName="Save" loading={aGravar} loadingText="A gravar…" type="submit">
Gravar
</IGRPButton>
{/* só ícone — passa sempre aria-label */}
<IGRPButton size="icon-sm" variant="ghost" iconName="Pencil" aria-label="Editar" />Tipografia
IGRPHeadline
Título (h1 a h6) com descrição e ícone opcionais. No Page Builder é o widget Headline.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
title | string | — | Texto do título (obrigatório) |
variant | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h3" | Nível e tamanho |
description | string | — | Texto por baixo do título |
showIcon / iconName | boolean / string | false / "Info" | Ícone ao lado do título |
iconPlacement | "start" | "end" | "start" | Lado do ícone |
<IGRPHeadline variant="h2" title="Pedidos" description="Pedidos submetidos nos últimos 30 dias." />IGRPText
Bloco de texto com tamanho, peso, alinhamento, truncagem e realce de termos. No Page Builder é o widget Text.
Gerado pelo Studio| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
size | "sm" | "default" | "lg" | "xl" | "default" | Tamanho |
weight | "light" | "normal" | "medium" | "semibold" | "bold" | "normal" | Peso |
align | "left" | "center" | "right" | "justify" | "left" | Alinhamento |
spacing | "none" | "tight" | "normal" | "loose" | "tight" | Margem inferior |
truncate / maxLines | boolean / number | false / — | Corta com reticências (numa ou em várias linhas) |
highlight | string[] | [] | Termos a realçar |
as | "p" | "span" | "div" | "div" | Elemento HTML |
<IGRPText size="sm" truncate maxLines={2} highlight={[termo]}>
{descricao}
</IGRPText>Ícones
IGRPIcon
Mostra um ícone Lucide pelo nome. Aceita PascalCase ("LayoutDashboard") ou kebab-case ("layout-dashboard"), por isso funciona com nomes que chegam como dados (por exemplo, menus vindos do Access Management). Cada ícone é carregado à parte, não o catálogo inteiro; um nome desconhecido mostra um AlertCircle vermelho.
A mesma convenção repete-se nos componentes Horizon: showIcon liga o ícone, iconName escolhe-o, iconPlacement diz o lado e iconClassName estiliza-o.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
iconName | IGRPIconName | string | — | Nome do ícone Lucide (obrigatório) |
size | number | string | 16 | Tamanho em px |
color | string | "currentColor" | Cor do traço |
strokeWidth | number | 2 | Espessura do traço |
<IGRPIcon iconName="FileText" size={20} />Imagens
IGRPImage
Imagem sobre o next/image. Sem width e height, preenche o contentor numa proporção fixa (ratio); com eles, usa o tamanho dado. No Page Builder é o widget Image.
| Prop | Tipo | Por defeito | Descrição |
|---|---|---|---|
src / alt | string | — | Imagem e texto alternativo (do next/image) |
ratio | "1/1" | "4/3" | "16/9" | "21/9" | "16/9" | Proporção quando não há width/height |
rounded | variante de arredondamento | "md" | Raio dos cantos |
width / height | number | — | Tamanho fixo (desliga o modo fill) |
<IGRPImage src="/images/capa.jpg" alt="Capa" ratio="21/9" />Imagens remotas
Como usa o next/image, um src de outro domínio tem de estar em images.remotePatterns no next.config.
Outros componentes
| Componente | Para quê | Widget no Studio |
|---|---|---|
IGRPLink | Link (Next.js ou externo, abre em nova aba) com ícone, size e underline | — |
IGRPTextList / IGRPTextListItem | Listas (unordered, ordered, checklist, steps, features) com ícones, badges e sub-itens | Text List |
IGRPImageCropper | Recortar uma imagem (basic, circular, zoom, preview); devolve um Blob em onCrop | Image Cropper |
IGRPPdfViewer | Ver PDFs em modal ou inline, a partir de uma lista de documentos | PDF Viewer |
IGRPVideoEmbed | Incorporar vídeo (YouTube, Vimeo…) com proporção e opções de reprodução | Video Embed |
IGRPChat | Interface de chat que envia as mensagens para um apiEndpoint | Chat |
IGRPCopyTo | Botão de copiar para a área de transferência, com tooltip e toast | Copy To |
IGRPStepperProcess | Passos de um processo em linha horizontal, com o conteúdo do passo atual | — |
Última atualização: