Arbetsförmedlingens designsystem finns för att utvecklare, designers och produktledare tillsammans ska kunna skapa bättre tjänster för den svenska arbetsmarknaden.
Utvecklas som öppen källkod tillsammans med andra myndigheter, utbildningsanordnare och kommersiella aktörer.
Stöd för React, Angular, Web Components och Figma.
Kom igång
Installera designsystemet genom att köra en av följande rader
# React
npm install @designsystem-se/af-react @designsystem-se/af
# Angular
npm install @designsystem-se/af-angular @designsystem-se/af
# Inget ramverk
npm install @designsystem-se/af
Lägg till följande rader i projektets globala css-fil
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css';
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css';
Det var allt! 🚀
Exempel
React
// App.tsx
import { DigiButton } from '@designsystem-se/af-react';
import { ButtonVariation } from '@designsystem-se/af';
export function App() {
const handleClick = () => console.log('👋 Hallå Världen');
return (
<DigiButton afVariation={ButtonVariation.PRIMARY} onAfOnClick={handleClick}>
Hälsa
</DigiButton>
);
}
Angular
// app.component.ts
import { Component } from '@angular/core';
import { DigiArbetsformedlingenAngularModule } from '@designsystem-se/af-angular';
import { ButtonVariation } from '@designsystem-se/af';
@Component({
selector: 'app-root',
standalone: true,
imports: [DigiArbetsformedlingenAngularModule],
templateUrl: './app.component.html'
})
export class AppComponent {
buttonVariation = ButtonVariation.PRIMARY;
handleClick() {
console.log('👋 Hallå Världen');
}
}
<!--app.component.html-->
<digi-button afVariation="buttonVariation" (afOnClick)="handleClick"
>Hälsa</digi-button
>
Old School
<!--index.html-->
<!doctype html>
<html>
<head>
<link
rel="stylesheet"
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css" />
<link
rel="stylesheet"
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css" />
<script
type="module"
src="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js"></script>
</head>
<body>
<digi-button af-variation="primary">Hälsa</digi-button>
<script>
let btn = document.querySelector('digi-button');
btn.addEventListener('afOnClick', () => {
console.log('👋 Hallå Världen');
});
</script>
</body>
</html>
Bidra till Designsystemet
Är du nyfiken på att hjälpa till med att bygga ett av sveriges mest tillgängliga och flexibla designsystem? Say no more. ✨
Vi behöver hjälp med allt ifrån kod, design, tillgänglighetsarbete, copywriting och marknadsföring.
- Läs Contribution Guidelines
- Kolla igenom issue tracker. 💡 Nybörjartips, filtrera efter "Mindre uppgift"
Kommunikation & Forum
⚠️ Observera: Dela inte känslig information eller personuppgifter. Allting i GitLab är tillgängligt för alla besökare. Vid övriga ärenden var god använd kontaktuppgifter som finns tillgängliga på dokumentationswebben.
-
Har du upptäckt ett problem med designsystemet? Skapa issue 🐛
-
Tycker du att något saknas i designsystemet? Skicka in önskemål 🎁
-
Har du fastnat på något som inte känns helt rätt eller är oklart? Ställ fråga 🙋
Om designsystemet
Designsystemet är välbeprövat i myndighetsvärlden sen flera år tillbaka. Komponenterna visas flera miljoner gånger per månad till olika användare.
Team Designsystem @ Arbetsförmedlingen 2026