Empty

Componente composto para comunicar a ausência de conteúdo em listas, buscas e painéis.

O mk-empty é um componente composto que comunica a ausência de conteúdo. Combine os sub-componentes mk-empty-icon, mk-empty-title, mk-empty-description e mk-empty-action para montar o estado vazio adequado ao contexto.

Visão geral

import {
  MkEmpty,
  MkEmptyIcon,
  MkEmptyTitle,
  MkEmptyDescription,
  MkEmptyAction,
  MkButton,
} from '@db1/makuco-ui-react';

<MkEmpty>
  <MkEmptyIcon icon="inbox" />
  <MkEmptyTitle>Nenhum resultado encontrado</MkEmptyTitle>
  <MkEmptyDescription>Tente ajustar os filtros de busca.</MkEmptyDescription>
  <MkEmptyAction>
    <MkButton variant="outlined">Limpar filtros</MkButton>
  </MkEmptyAction>
</MkEmpty>

<mk-empty>
  <mk-empty-icon icon="inbox"></mk-empty-icon>
  <mk-empty-title>Nenhum resultado encontrado</mk-empty-title>
  <mk-empty-description>Tente ajustar os filtros de busca.</mk-empty-description>
  <mk-empty-action>
    <mk-button variant="outlined">Limpar filtros</mk-button>
  </mk-empty-action>
</mk-empty>

Sem ícone

Use sem mk-empty-icon quando o contexto já está claro ou o espaço é limitado.

<MkEmpty>
  <MkEmptyTitle>Nenhum item cadastrado</MkEmptyTitle>
  <MkEmptyDescription>Adicione o primeiro item para começar.</MkEmptyDescription>
  <MkEmptyAction>
    <MkButton variant="filled" leadingIcon="plus">Novo item</MkButton>
  </MkEmptyAction>
</MkEmpty>

<mk-empty>
  <mk-empty-title>Nenhum item cadastrado</mk-empty-title>
  <mk-empty-description>Adicione o primeiro item para começar.</mk-empty-description>
  <mk-empty-action>
    <mk-button variant="filled" leading-icon="plus">Novo item</mk-button>
  </mk-empty-action>
</mk-empty>

Múltiplas ações

mk-empty-action suporta múltiplos botões lado a lado.

<MkEmpty>
  <MkEmptyIcon icon="folder-open" />
  <MkEmptyTitle>Pasta vazia</MkEmptyTitle>
  <MkEmptyDescription>Esta pasta não contém nenhum arquivo.</MkEmptyDescription>
  <MkEmptyAction>
    <MkButton variant="outlined" leadingIcon="upload">Fazer upload</MkButton>
    <MkButton variant="filled" leadingIcon="file-plus">Novo documento</MkButton>
  </MkEmptyAction>
</MkEmpty>

<mk-empty>
  <mk-empty-icon icon="folder-open"></mk-empty-icon>
  <mk-empty-title>Pasta vazia</mk-empty-title>
  <mk-empty-description>Esta pasta não contém nenhum arquivo.</mk-empty-description>
  <mk-empty-action>
    <mk-button variant="outlined" leading-icon="upload">Fazer upload</mk-button>
    <mk-button variant="filled" leading-icon="file-plus">Novo documento</mk-button>
  </mk-empty-action>
</mk-empty>

Ícone customizado

Use o slot padrão de mk-empty-icon sem a prop icon para imagens ou SVGs customizados.

<MkEmpty>
  <MkEmptyIcon>
    <img src="/empty-state.svg" alt="Estado vazio" />
  </MkEmptyIcon>
  <MkEmptyTitle>Ilustração customizada</MkEmptyTitle>
  <MkEmptyDescription>Use o slot de mk-empty-icon para imagens ou SVGs próprios.</MkEmptyDescription>
</MkEmpty>

<mk-empty>
  <mk-empty-icon>
    <img src="/empty-state.svg" alt="Estado vazio" />
  </mk-empty-icon>
  <mk-empty-title>Ilustração customizada</mk-empty-title>
  <mk-empty-description>Use o slot de mk-empty-icon para imagens ou SVGs próprios.</mk-empty-description>
</mk-empty>

API

`mk-empty-icon`

Prop	Tipo	Padrão	Descrição
`icon`	`IconName`	—	Nome do ícone Lucide. Quando definido, o slot é ignorado.

Slots

Componente	Slot	Descrição
`mk-empty`	padrão	Aceita `mk-empty-icon`, `mk-empty-title`, `mk-empty-description` e `mk-empty-action`.
`mk-empty-icon`	padrão	Conteúdo customizado quando `icon` não está definido. Aceita `img`, SVG ou qualquer HTML.
`mk-empty-title`	padrão	Texto do título do estado vazio.
`mk-empty-description`	padrão	Texto descritivo complementar ao título.
`mk-empty-action`	padrão	Botões ou links de ação. Múltiplos elementos ficam lado a lado.

Acessibilidade

mk-empty usa role="status" e aria-live="polite" para que leitores de tela anunciem o estado vazio de forma não intrusiva.
mk-empty-title e mk-empty-description renderizam <p> — a semântica de nível de heading fica a cargo do consumidor.
O ícone Lucide em mk-empty-icon é marcado com aria-hidden="true" — é puramente decorativo.
Ícones customizados via slot devem incluir alt descritivo quando transmitem informação.

Empty

On this page