Gombok
A Karrier Portál gomb komponensei, amelyek a felhasználói interakciók alapját képezik.
Elsődleges gombok
Az elsődleges gombok az Audi Red (#f50537) színt használják és a legfontosabb akciókhoz vannak fenntartva. Ezek a konverziós célú gombok, mint például a "Jelentkezés", "Küldés" vagy "Mentés".
Alap állapotok
Méretek
Ikonokkal
Kódpélda
<button class="bg-[#f50537] text-white px-6 py-3 rounded-lg">Alap állapot</button>
<button class="bg-[#f50537] text-white px-6 py-3 rounded-lg hover:bg-[#940826] active:bg-[#70061D]">
Hover/Aktív állapot
</button>
<button class="bg-[#f50537] text-white px-6 py-3 rounded-lg opacity-50 cursor-not-allowed">
Letiltott állapot
</button>Használati irányelvek
- Oldalanként csak egy elsődleges gomb használandó a fő akcióhoz
- Az elsődleges gomb mindig az Audi piros színt (#f50537) használja
- A hover állapot sötétebb (#940826), az aktív állapot még sötétebb (#70061D)
Másodlagos gombok
A másodlagos gombok az Audi piros (#f50537) szegélyt és szöveget használnak fehér háttérrel. Ezek kiegészítő akciókhoz használandók.
Alap állapotok
Méretek
Ikonokkal
Kódpélda
<button class="border-2 border-[#f50537] text-[#f50537] px-6 py-3 rounded-lg">
Alap állapot
</button>
<button class="border-2 border-[#f50537] text-[#f50537] px-6 py-3 rounded-lg bg-[#FDE8EC] hover:bg-[#FCE0E6] active:bg-[#FBCDD6]">
Hover/Aktív állapot
</button>
<button class="border-2 border-[#E0E0E0] text-[#A0A0A0] px-6 py-3 rounded-lg cursor-not-allowed">
Letiltott állapot
</button>Használati irányelvek
- Másodlagos opcióhoz, például "Mégse" vagy "Vissza" funkciókhoz használandó
- Gyakran használható az elsődleges gomb alternatívájaként
- A hover állapot világos piros hátteret (#FDE8EC) használ
Szöveges gombok
A szöveges gombok háttér nélkül, csak szövegként jelennek meg, és kisebb fontosságú akciókhoz használandók.
Alap állapotok
Ikonokkal
Kódpélda
<button class="text-[#f50537] font-medium">Alap állapot</button>
<button class="text-[#f50537] font-medium hover:underline">Hover állapot</button>
<button class="text-[#A0A0A0] cursor-not-allowed">Letiltott állapot</button>
<button class="text-[#f50537] font-medium flex items-center">
<i class="fa-solid fa-plus mr-1"></i>
Hozzáadás
</button>Használati irányelvek
- Harmadlagos opciókhoz vagy kiegészítő funkciókhoz használandó
- Különösen alkalmas helytakarékos megoldásként, vagy sűrű UI esetén
- Hover állapotnál aláhúzás jelenik meg a jobb észlelhetőség érdekében