![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)

<div align="center">
  <p>Arbetsförmedlingens designsystem finns för att utvecklare, designers och produktledare tillsammans ska kunna skapa bättre tjänster för den svenska arbetsmarknaden.</p>
  <p>Utvecklas som öppen källkod tillsammans med andra myndigheter, utbildningsanordnare och kommersiella aktörer.</p>
 <p>Stöd för React, Angular, Web Components och Figma.</p>
</div>

<div align="center">
  <a href="https://designsystem.arbetsformedlingen.se">Dokumentation ↗</a>
</div>

## 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 (
    <DigiButton afVariation={ButtonVariation.PRIMARY} onAfOnClick={handleClick}>
      Hälsa
    </DigiButton>
  );
}
```

### 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
<!--app.component.html-->
<digi-button afVariation="buttonVariation" (afOnClick)="handleClick"
  >Hälsa</digi-button
>
```

### Old School

```html
<!--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](/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
