Pular para o conteúdo
Faculdade PhorteDesign System

IconBox

Em andamento

Ícone dentro de um quadrado ou círculo de fundo suave, para ilustrar um item de lista ou de grade — em quatro tamanhos, quatro tratamentos e quatro arredondamentos. Decorativo por padrão; com label, uma imagem nomeada.

Função
Conteúdo
Também chamado de
ícone com fundo, caixa de ícone, selo de ícone
Mora em
app/components/atoms/IconBox.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Variantes
  3. Tamanhos
  4. Com Texto Ao Lado
  5. Com rótulo
  6. Interativo

Quando usar

No começo de itens de uma grade de benefícios ou de uma lista de passos, para dar ritmo visual.

Faça

  • Passe o componente do ícone (icon={Award}), não o elemento.
  • Deixe o texto ao lado dizer o que o ícone ilustra: sem label, ele é decorativo.
  • Passe label quando o ícone for a informação, sem texto ao lado — a modalidade só por ícone (E64).
  • Use interativo dentro de um cartão ou link com group: a caixa acende junto no hover.
  • Mantenha o mesmo tamanho e tratamento em todos os itens de uma grade.

Evite

  • Usar o IconBox como botão: não tem foco nem alvo.
  • Um ícone que carrega informação sozinho sem label: ele fica aria-hidden, e a informação some para quem ouve.

Quando não usar. Para uma pessoa, use o Avatar. Para um botão com ícone, o Button com aria-label. Para ícone sozinho no texto, o próprio ícone do lucide-react.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Caixa — Quadrado de 32 a 80px, arredondado pelo `rounded` (círculo por padrão).
  2. Ícone — O átomo `Icone` (E66), no degrau da caixa: 16, 24, 32 e 32px — o `xl` usava 40, fora da escala. Traço do degrau (2; 1,75 no 32px), 1,5 no `outline`.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Primárioprimary (padrão): fundo --primary-subtle (sólido, E64) e ícone vermelho — 4,32:1.
Secundáriosecondary: fundo --secondary-subtle e ícone verde — 4,28:1.
InterativoCom interativo, o group-hover do pai enche a caixa na cor cheia e deixa o ícone claro (E64).
Contornooutline: sem fundo, borda --border, ícone cinza de traço fino.
Fantasmaghost: sem fundo, ícone --ink.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Qualquer varianteSem foco. Só reage ao hover com interativo, pelo group do pai.

Relacionados