TableEmpty
What a table shows instead of rows (Figma "Backoffice / Table Empty" 2056:57525): Empty, No results, Error.
Error is announced (role="alert": the list failed to load); the others are a polite status. The description wraps centred, at most 420 px.
<TableEmpty kind="no-results" title="Nenhum cliente com esses filtros" description="Tire um filtro ou busque por outro e-mail." action={<Button variant="outline" size="sm">Limpar filtros</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Table Empty
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Kind · Empty
| Backoffice / Table Empty |
|---|
Nenhum cliente ainda Quando a primeira família assinar, ela aparece aqui. |
Kind · No results
| Backoffice / Table Empty |
|---|
Nenhum cliente com esses filtros Tire um filtro ou busque por outro e-mail. |
Kind · Error
| Backoffice / Table Empty |
|---|
Não deu para carregar os clientes A API não respondeu. Tente de novo em instantes. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| kind? | "empty" | "error" | "no-results" | "empty" | Figma "Kind": nothing yet, nothing matches the filters, or the list failed. |
| title | ReactNode | — | |
| description? | ReactNode | — | |
| action? | ReactNode | — | Figma "showAction": "Limpar filtros", "Tentar de novo". Empty has none. |
| className? | string | — |