Button

Komponentbygger

Her kan du teste ut alle egenskapene til PktButton, og få ferdig kode for React og HTML. For Vue-bruk kan du i de fleste tilfeller bruke samme kode som React, men vær oppmerksom på at Vue har enkelte forskjeller i hvordan props sendes inn og hvordan hendelser håndteres.

Hvordan ta i bruk?

// React
import { PktButton } from "@oslokommune/punkt-react";

// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-button.js";

// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-button.js"></script>;

Testing

Dersom dere skal skrive tester med JSDOM eller liknende, er det viktig at dere lar komponenten bli rendret ferdig før dere tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-button");

CSS oversikt

Klassen .pkt-btn--full-small kan sendes inn hvis man ønsker at knappen skal ta full bredde på skjermer fra 576px/36rem og ned. Dette er en responsiv klasse og vil ikke påvirke knappen på større skjermer.

Props, slots og events