Karrier Design System
FőoldalKarrier PortálKomponensekStátuszjelzők

Státuszjelzők

A Karrier Portál státuszjelző komponensei, amelyek segítenek a felhasználóknak megérteni a folyamatok és jelentkezések állapotát.

Státusz címkék

A státusz címkék egyszerűen és egyértelműen jelzik egy elem vagy folyamat állapotát, különböző színekkel kiemelve a különböző állapotokat.

Alap státusz címkék

FolyamatbanElfogadvaElutasítvaFüggőbenVisszajelzésre várLezárva

Ikonos státusz címkék

Folyamatban Elfogadva Elutasítva Függőben

Méretváltozatok

KicsiKözepesNagy

Kódpélda

<!-- Alap státusz címkék -->
<span class="inline-block px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">Folyamatban</span>
<span class="inline-block px-3 py-1 text-sm bg-green-100 text-green-800 rounded-full">Elfogadva</span>
<span class="inline-block px-3 py-1 text-sm bg-red-100 text-red-800 rounded-full">Elutasítva</span>

<!-- Ikonos státusz címkék -->
<span class="inline-flex items-center px-3 py-1 text-sm bg-green-100 text-green-800 rounded-full">
  <i class="fa-solid fa-check mr-2"></i>
  Elfogadva
</span>

Színkódolás

  • Kék: Folyamatban, aktív állapotok
  • Zöld: Sikeres, elfogadott állapotok
  • Piros: Hibás, elutasított állapotok
  • Sárga: Várakozó, függőben lévő állapotok
  • Lila: Speciális állapotok, visszajelzésre váró
  • Szürke: Inaktív, lezárt állapotok

Használati irányelvek

  • Következetesen használd a színeket a különböző állapotok jelzésére
  • Az ikonok javítják a címkék érthetőségét
  • A címkéket más információkkal együtt jelenítsd meg (pl. dátum, leírás)
  • A kerek forma megkülönbözteti a státusz címkéket más címkéktől

Státusz értesítések

A státusz értesítések fontos visszajelzést adnak a felhasználóknak a jelentkezési folyamat változásairól vagy fontos eseményekről.

Információs értesítés

Jelentkezés folyamatban

A jelentkezésed sikeresen beérkezett. Az elbírálás folyamatban van, eredményről emailben értesítünk.

Sikeres értesítés

Sikeres jelentkezés

Gratulálunk! A jelentkezésed sikeres volt. Hamarosan felvesszük veled a kapcsolatot a következő lépésekkel kapcsolatban.

Figyelmeztető értesítés

Figyelem!

A jelentkezési határidő hamarosan lejár. Kérjük, fejezd be a jelentkezési folyamatot a határidő előtt.

Hiba értesítés

Hiba történt

A jelentkezés sikertelen volt. Kérjük, ellenőrizd az adataidat és próbáld újra később.

Kódpélda

<div class="p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r-[4px]">
  <div class="flex">
    <div class="shrink-0">
      <i class="fa-solid fa-circle-info text-blue-500 mt-1"></i>
    </div>
    <div class="ml-3">
      <h3 class="text-sm font-medium text-blue-800">Jelentkezés folyamatban</h3>
      <div class="mt-2 text-sm text-blue-700">
        <p>A jelentkezésed sikeresen beérkezett. Az elbírálás folyamatban van, eredményről emailben értesítünk.</p>
      </div>
    </div>
  </div>
</div>

Használati irányelvek

  • A státusz értesítéseket jól látható helyen jelenítsd meg
  • Az ikonok segítenek gyorsan azonosítani az értesítés típusát
  • A színkódolás konzisztens a státusz címkékkel
  • A szöveges információ legyen tömör és pontos
  • Lehetőség szerint adj további információt vagy cselekvési lehetőséget

Jelentkezés állapota

A jelentkezés állapota komponens a felhasználók számára részletes áttekintést nyújt a jelentkezési folyamat aktuális állapotáról.

Szoftverfejlesztő mérnök jelentkezés

Folyamatban

Beküldve: 2025. április 10.

1

Jelentkezés beküldése

Sikeresen teljesítve 2025.04.10.

2

Előszűrés

Sikeresen teljesítve 2025.04.12.

3

Személyes interjú

Visszaigazolt időpont: 2025.04.20. 10:00

Függőben
4

Szakmai feladat

Még nem kezdődött el

Várható
5

Döntés

Még nem kezdődött el

Várható

Felépítés és használat

A jelentkezés állapota komponens egyesíti a lépéssorozatot és a státuszjelzőket, hogy átfogó képet adjon a folyamatról:

  • A komponens fejléce tartalmazza a pozíció nevét és az általános státuszt
  • Minden lépés esetén látható az állapot és a kapcsolódó dátum/időpont
  • A teljesített lépések "check" ikonnal vannak jelölve
  • A folyamatban lévő lépések státusz címkével vannak ellátva
  • Opcionális cselekvési gombok a jelentkezéssel kapcsolatos további lépésekhez

Használati irányelvek

  • A komponenst a jelölt felhasználói felületén, jól látható helyen helyezd el
  • Minden állapotváltozást azonnal frissíts és értesítsd a felhasználót
  • A lépések számozása és státuszjelölése konzisztens a többi komponenssel
  • Biztosíts lehetőséget a felhasználók számára a kapcsolatfelvételre
  • Teljesített lépéseknél az Audi piros (#f50537) színt használd