Przejdź do treści
prfct

Stany puste

Co pokazać, gdy nie ma czego pokazać — przy pierwszym użyciu, braku wyników i błędach.

Pusty ekran to moment największej uwagi przy najmniejszej ilości treści. Wykorzystaj go, żeby wyjaśnić, co powinno się tu znaleźć, i zaproponować następny krok.

Nie masz jeszcze projektów
Utwórz projekt, aby wdrożyć swoją pierwszą stronę.
Brak wyników dla „faktry”
Sprawdź pisownię lub wyczyść filtry.
Nie udało się załadować wdrożeń
Wygląda na to, że jesteś offline. Spróbujemy ponownie, gdy połączenie wróci.
import {
  FolderPlusIcon,
  RefreshCwIcon,
  SearchXIcon,
  WifiOffIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export default function EmptyStates() {
  return (
    <div className="grid w-full gap-4 lg:grid-cols-3">
      <Empty variant="outline" className="p-6 md:p-8">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <FolderPlusIcon />
          </EmptyMedia>
          <EmptyTitle>Nie masz jeszcze projektów</EmptyTitle>
          <EmptyDescription>
            Utwórz projekt, aby wdrożyć swoją pierwszą stronę.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button size="sm">Utwórz projekt</Button>
        </EmptyContent>
      </Empty>
      <Empty variant="outline" className="p-6 md:p-8">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <SearchXIcon />
          </EmptyMedia>
          <EmptyTitle>Brak wyników dla „faktry”</EmptyTitle>
          <EmptyDescription>
            Sprawdź pisownię lub wyczyść filtry.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button size="sm" variant="outline">
            Wyczyść filtry
          </Button>
        </EmptyContent>
      </Empty>
      <Empty variant="outline" className="p-6 md:p-8">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <WifiOffIcon />
          </EmptyMedia>
          <EmptyTitle>Nie udało się załadować wdrożeń</EmptyTitle>
          <EmptyDescription>
            Wygląda na to, że jesteś offline. Spróbujemy ponownie, gdy połączenie wróci.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button size="sm" variant="outline">
            <RefreshCwIcon data-icon="inline-start" />
            Spróbuj ponownie
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}

Trzy rodzaje pustki

RodzajPrzyczynaCo zaproponować
Pierwsze użycieNic jeszcze nie utworzono.Jednym zdaniem wyjaśnij, co to daje, i pokaż główną akcję.
Brak wynikówWyszukiwanie lub filtr wykluczyły wszystko.Powtórz zapytanie, podpowiedz poprawkę i zaproponuj wyczyszczenie filtrów.
BłądNie udało się wczytać treści.Powiedz prostymi słowami, co się stało, i zaproponuj ponowienie próby. Reszta strony ma nadal działać.

Wytyczne

  • Użyj komponentu Empty z ikoną w EmptyMedia, tytułem, jednozdaniowym opisem i najwyżej dwiema akcjami.
  • Dopasuj się do kontenera. W karcie lub tabeli użyj variant="outline" i zwartych odstępów wewnętrznych; na całej stronie wyśrodkuj stan pusty i zostaw wokół niego dużo miejsca.
  • Nie obwiniaj. Brak wyników dla „billng” brzmi neutralnie; Masz literówkę — już nie.
  • Zachowaj kontekst. Pokazuj wokół stanu pustego nagłówki tabeli, filtry i nawigację, żeby ludzie nie tracili orientacji.
  • Ilustracje są opcjonalne. Ikona wystarczy; duża ilustracja przy każdej pustej tabeli szybko staje się szumem.