![En byggkloss av ospecificerat märke. Illustration av typsnitt, färgstickor, datorer och mobiler. Skärmarna innehåller ikoner och inmatningsfält.](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/raw/main/assets/readme-banner.png)

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.

Dokumentation ↗
## Kom igång Installera designsystemet genom att köra en av följande rader ```sh # 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 ```css @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 ```jsx // 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 ( Hälsa ); } ``` ### Angular ```ts // 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'); } } ``` ```html Hälsa ``` ### Old School ```html Hälsa ``` ## 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](/CONTRIBUTING.md) - Kolla igenom [issue tracker](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues). 💡 Nybörjartips, [filtrera efter "Mindre uppgift"](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/?sort=created_date&state=opened&label_name[]=Mindre%20uppgift) ## 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](https://designsystem.arbetsformedlingen.se). - Har du upptäckt ett problem med designsystemet? [Skapa issue 🐛](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=bug) - Tycker du att något saknas i designsystemet? [Skicka in önskemål 🎁](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=feature) - Har du fastnat på något som inte känns helt rätt eller är oklart? [Ställ fråga 🙋](https://gitlab.com/arbetsformedlingen/designsystem/digi/-/issues/new?issuable_template=question) ## 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 2025