MegaButton

Egnet til:

• å opptre som én hovedhandling, alene på siden, som du ønsker skal fange brukerens oppmerksomhet.
• hovedhandlinger som tar brukeren til et nytt område.

Uegnet til:

• innsending av skjema. Bruk Button i stedet.
• å bruke for å få mer synlighet enn en ordinær knapp.

Teknisk dokumentasjon

Se MegaButton i Storybook for tekniske detaljer. 

Hvordan bruke komponenten

MegaButton kan brukes både som knapp eller lenke, og komponenten vil da endre hvilken html-kode som brukes i bunn, selv om den visuelt sett ser lik ut. 

MegaButton tar brukeren til et nytt område

Noen ganger er hovedhandlingen til MegaButton kun at bruker skal videre til ny side eller tjeneste, og ikke navigere ned i egen sidestruktur. For å sikre best mulig brukskvalitet for flest mulig brukergrupper, skal du da bruke MegaButton som lenke. Komponenten vil samtidig ha funksjonen med at den tar brukeren til en ny side ved et klikk. 

MegaButton til en ny tjeneste i Skatteetaten. Kodet som <a>.

MegaButton tar brukeren til ekstern side

Hvis MegaButton brukes med et ikon for ekstern side legger vi til teksten «Til et annet nettsted», som vil leses opp av skjermlesere. Denne teksten er oversatt til norsk, nynorsk og engelsk og følger med komponenten.

Eksempel ved kobling til ekstern tjeneste.

Hovedhandlingen er på samme side

MegaButton når hovedhandling er på samme side. Kodet som <button>.

Universell utforming  

• Når MegaButton har en href så blir komponenten kodet som <a> istedenfor <button> og i tillegg så legges attributtet role=button på <a>. Denne løsningen er valgt fordi det er ønskelig at en skjermleser fortsatt leser opp at MegaButton er en knapp siden den visuelt fortsatt ser ut som en knapp samtidig.
• Når MegaButton har ikon for ekstern tjeneste vil skjermleser lese opp «Til et annet nettsted» for ikonet.