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