Ikonknapp (Icon Button)
<adb-icon-button> er en sirkulær, ikon-only knapp som deler fargesystem og varianter med <adb-button>. Den rendrer en perfekt sirkel med lik padding på alle sider.
aria-label er påkrevd — ikonknapper har ingen synlig tekst (WCAG 1.1.1).
Varianter
Primary
Secondary
Tertiary
Størrelser
Bruk
Lukkeknapp
<adb-icon-button aria-label="Lukk dialog"> <svg aria-hidden="true"><!-- lukk-ikon --></svg></adb-icon-button>I verktøylinje
<div role="toolbar" aria-label="Handlinger"> <adb-icon-button variant="tertiary" aria-label="Søk"> <svg aria-hidden="true"><!-- søk-ikon --></svg> </adb-icon-button> <adb-icon-button variant="tertiary" aria-label="Innstillinger"> <svg aria-hidden="true"><!-- innstillinger-ikon --></svg> </adb-icon-button></div>Med Drupal/Twig
Ikoner kan pakkes i et wrapper-element — komponenten sørger for korrekt sentrering:
<adb-icon-button variant="secondary" aria-label="Bytt tema"> <span>{{ source('@gaupe/src/svg/light-mode.svg') }}</span></adb-icon-button>Disclosure-trigger
<adb-icon-button aria-controls="menu-panel" aria-expanded="false" aria-label="Åpne meny"> <svg aria-hidden="true"><!-- hamburger-ikon --></svg></adb-icon-button>API
| Attributt | Type | Standard | Beskrivelse |
|---|---|---|---|
variant | primary | secondary | tertiary | primary | Visuell vekt |
color | accent | danger | accent | Fargebruk. Ignoreres av tertiary. |
size | sm | md | lg | md | Størrelse |
disabled | boolean | false | Deaktiverer knappen |
type | button | submit | reset | button | Native type. Ignoreres med href. |
href | string | — | Rendrer <a> i stedet for <button> |
target | _self | _blank | _parent | _top | — | Lenke-mål (kun med href) |
rel | string | — | Lenkerelasjoner |
aria-label | string | — | Påkrevd — beskriver handlingen |
aria-controls | string | — | ID-en til elementet knappen styrer |
aria-expanded | 'true' | 'false' | — | Om det kontrollerte elementet er åpent |
CSS Parts
adb-icon-button::part(base) { /* overstyr det indre <button>- eller <a>-elementet */}Universell utforming (WCAG 2.1 AA)
aria-label er påkrevd
Ikonknapper har ingen synlig tekst. Uten aria-label har knappen intet tilgjengelig navn — dette er et brudd på WCAG 1.1.1 og 4.1.2.
<!-- ✅ Riktig --><adb-icon-button aria-label="Lukk dialog"> <svg aria-hidden="true">…</svg></adb-icon-button>
<!-- ❌ Feil: ingen tilgjengelig navn --><adb-icon-button> <svg>…</svg></adb-icon-button>WCAG-kriterier
| Kriterium | Nivå | Oppfylt | Merknad |
|---|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | ✅ | Krever aria-label |
| 1.4.3 Kontrast (minimum) | AA | ✅ | Deler kontrastprofil med <adb-button> |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | ✅ | Ikon arver tekstfarge med tilstrekkelig kontrast |
| 2.1.1 Tastatur | A | ✅ | Native <button> — Enter og Space fungerer |
| 2.4.7 Fokus synlig | AA | ✅ | 4 px fokusring |
| 2.5.5 Størrelse på mål | AAA | ⚠️ | sm er under 44 px — bruk md eller lg for touch |
| 4.1.2 Navn, rolle, verdi | A | ✅ | aria-label gir tilgjengelig navn |