AppFeaturedIcon

Átomos

Abrir no Storybook

Ícone decorativo destacado em um círculo com cor semântica.

Quando usar: identificar visualmente um arquivo, etapa ou resumo curto ao lado de um texto já nomeado.

Quando não usar: o ícone precisa ser a única forma de comunicar uma ação ou informação; nesse caso, forneça um nome acessível no controle que o contém.

Importar

import { AppFeaturedIcon } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppFeaturedIcon.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppFeaturedIcon.css';

Exemplos

Default

Exemplo: AppFeaturedIcon, Default

const Default = () => <AppFeaturedIcon icon={<IconFilePresent />} />;

Tons

Exemplo: AppFeaturedIcon, Tons

const Tons = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
    <AppFeaturedIcon tone="primary" icon={<IconFilePresent />} />
    <AppFeaturedIcon tone="success" icon={<IconFilePresent />} />
    <AppFeaturedIcon tone="warning" icon={<IconFilePresent />} />
    <AppFeaturedIcon tone="danger" icon={<IconFilePresent />} />
    <AppFeaturedIcon tone="neutral" icon={<IconFilePresent />} />
  </div>
);

Tamanhos

Exemplo: AppFeaturedIcon, Tamanhos

const Tamanhos = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <AppFeaturedIcon size="sm" icon={<IconFilePresent />} />
    <AppFeaturedIcon size="md" icon={<IconFilePresent />} />
    <AppFeaturedIcon size="lg" icon={<IconFilePresent />} />
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
icon*	ReactNode	—	Ícone decorativo exibido dentro do círculo.
size	"sm" | "md" | "lg"	md	Diâmetro do círculo: 32px, 40px ou 48px. Padrão: md.
tone	"success" | "warning" | "danger" | "neutral" | "primary"	primary	Intenção visual do ícone. Padrão: primary.