Button

• Legg klassen button på typisk <button> eller <a>
• Husk type="button" hvis en <button> gjør noe annet enn å sende skjema

Varianter

• Bruk data-variant="primary | secondary | tertiary"

Størrelser

• Bruk data-size="sm | md | lg"

Pil og popover

• Legg på data-arrow (høyrestilt) eller data-arrow="left | right"
• Lasteindikator vil erstatte pil dersom disse kombineres
• Kombiner popovertarget + data-arrow for chevron

Ikoner

• Ikon fra Aksel kan legges inn før eller etter tekst

Loading

• For <button>: Legg på <button aria-busy="true" disabled
• For <a>: Legg på <a aria-busy="true" tabindex="-1"
• Lasteindikator vil erstatte pil dersom disse kombineres

Handlingsmeny

• Bruk aria-label="Knappetekst her" i stedet for innhold
• Da får du automatisk ikon for handlingsmeny

Pressed

• Bruk <button> med aria-pressed="true"
• Knappen endrer ikke stil, men du kan vise/skjule innhold ved bruk av attributten data-pressed="true | false":

Disabled

• Legg på attributt disabled for <button> eller aria-disabled="true" tabindex="-1" for andre elementer

Tooltip

• Bruk data-tooltip="Hjelpetekst"
• Teksten blir også automatisk tilgjengelig for skjermlesere
• Merk: Krever minst 24px / 1.5rem / 6 units luft under for å vises