Gombok

A gombok a HR portálon a felhasználói interakciók elsődleges elemei, amelyek cselekvéseket indítanak el vagy navigációt biztosítanak.

Elsődleges gombok

Az elsődleges gombok kiemelt funkciókhoz használhatók, mint például űrlap beküldés, megerősítés vagy fő műveletek. A HR Portálon ezeket az Audi HR zöld (#f50537) szín jelöli.

Alapállapotok

Alapállapot

Letiltott állapot

Aktív/Fókuszált állapot

Kódpélda

<UButton color="audi-red" class="py-2 px-6 rounded-[4px]">Mentés</UButton>

<UButton color="audi-red" class="py-2 px-6 rounded-[4px] opacity-50 cursor-not-allowed" disabled>Mentés</UButton>
            

Méretvariációk

Kicsi (sm)

Közepes (md - alapértelmezett)

Nagy (lg)

Kódpélda

<!-- Kicsi -->
<UButton color="audi-red" size="sm" class="py-1 px-3 text-xs rounded-[4px]">Kicsi</UButton>

<!-- Közepes (alapértelmezett) -->
<UButton color="audi-red" size="md" class="py-2 px-6 rounded-[4px]">Közepes</UButton>

<!-- Nagy -->
<UButton color="audi-red" size="lg" class="py-3 px-8 rounded-[4px] text-lg">Nagy</UButton>
            

Ikonnal ellátott gombok

Ikon balra

Ikon jobbra

Csak ikon

Kódpélda

<!-- Ikon balra -->
<UButton color="audi-red" class="py-2 px-6 rounded-[4px] flex items-center"><i class="fa-solid fa-save mr-2"></i>Mentés</UButton>

<!-- Ikon jobbra -->
<UButton color="audi-red" class="py-2 px-6 rounded-[4px] flex items-center">Tovább<i class="fa-solid fa-arrow-right ml-2"></i></UButton>

<!-- Csak ikon -->
<UButton color="audi-red" class="p-2 rounded-[4px] flex items-center justify-center w-10 h-10"><i class="fa-solid fa-plus"></i></UButton>
            

Másodlagos gombok

A másodlagos gombok alternatív vagy kevésbé kiemelt műveletekhez használhatók, mint például mégse, vissza vagy opcionális funkciók.

Alapállapotok

Alapállapot

Letiltott állapot

Aktív állapot

Fókuszált állapot

Kódpélda

<UButton color="gray" variant="outline" class="py-2 px-6 rounded-[4px]">Mégse</UButton>

<UButton color="gray" variant="outline" class="py-2 px-6 rounded-[4px] opacity-50 cursor-not-allowed" disabled>Mégse</UButton>
            

Szöveges gombok

A szöveges gombok a legkevésbé kiemelt műveleteknél használhatók, mint például opcionális lépések vagy kiegészítő funkciók.

Alapállapotok

Alapállapot

Letiltott állapot

Aktív állapot

Fókuszált állapot

Kódpélda

<UButton color="audi-red" variant="link" class="py-2 px-4">Részletek</UButton>

<UButton color="audi-red" variant="link" class="py-2 px-4 opacity-50 cursor-not-allowed" disabled>Részletek</UButton>
            

Ikonnal ellátott szöveges gombok

Ikon balra

Ikon jobbra

Kódpélda

<UButton color="audi-red" variant="link" class="py-2 px-4 flex items-center"><i class="fa-solid fa-info-circle mr-2"></i>Segítség</UButton>

<UButton color="audi-red" variant="link" class="py-2 px-4 flex items-center">Összes megtekintése<i class="fa-solid fa-arrow-right ml-2"></i></UButton>
            

Használati irányelvek

Az alábbi irányelvek segítenek a gombok megfelelő használatában a HR portálon.

Mikor használjunk elsődleges gombot?

  • A fő művelethez egy oldalon vagy űrlapon (pl. "Mentés", "Küldés", "Jóváhagyás")
  • Pozitív, előrevivő műveletekhez (pl. "Folytatás", "Következő lépés")
  • Oldalanként csak egy elsődleges gomb használata javasolt a figyelemirányítás érdekében

Mikor használjunk másodlagos gombot?

  • Alternatív műveletekhez (pl. "Mégse", "Vissza")
  • Kevésbé fontos vagy opcionális műveletekhez
  • Az elsődleges gomb mellé helyezve, vizuális hierarchiát teremtve

Mikor használjunk szöveges gombot?

  • Kiegészítő információkhoz való hozzáféréshez (pl. "Részletek", "Segítség")
  • Linkszerű műveletekhez, amelyek nem elsődleges jelentőségűek
  • Tömöríteni kívánt felületeken, ahol kevesebb vizuális súly szükséges

Gombcsoportok elrendezése

Helyes használat

✓ Az elsődleges gomb jobb oldalon, a másodlagos bal oldalon

Kerülendő használat

✗ Ne helyezze az elsődleges gombot a másodlagos bal oldalára

Akadálymentességi szempontok

  • A szöveges feliratnak egyértelműen jeleznie kell a gomb funkcióját
  • A csak ikonnal ellátott gomboknál mindig adjunk meg 'aria-label' attribútumot
  • A fókuszállapotnak jól láthatónak kell lennie a billentyűzetes navigációhoz
  • A letiltott gombok állapotát az 'aria-disabled="true"' attribútummal is jelölje