JSPM – @designsystem-se/af@36.0.1-beta.0

Package Exports

@designsystem-se/af
@designsystem-se/af/components/digi-badge-notification.js
@designsystem-se/af/components/digi-badge-status.js
@designsystem-se/af/components/digi-bar-chart.js
@designsystem-se/af/components/digi-button.js
@designsystem-se/af/components/digi-calendar-datepicker.js
@designsystem-se/af/components/digi-calendar-week-view.js
@designsystem-se/af/components/digi-calendar.js
@designsystem-se/af/components/digi-chart-line.js
@designsystem-se/af/components/digi-code-block.js
@designsystem-se/af/components/digi-code-example.js
@designsystem-se/af/components/digi-code.js
@designsystem-se/af/components/digi-context-menu.js
@designsystem-se/af/components/digi-dialog.js
@designsystem-se/af/components/digi-expandable-accordion.js
@designsystem-se/af/components/digi-expandable-faq-item.js
@designsystem-se/af/components/digi-expandable-faq.js
@designsystem-se/af/components/digi-footer-card.js
@designsystem-se/af/components/digi-footer.js
@designsystem-se/af/components/digi-form-category-filter.js
@designsystem-se/af/components/digi-form-checkbox.js
@designsystem-se/af/components/digi-form-error-list.js
@designsystem-se/af/components/digi-form-fieldset.js
@designsystem-se/af/components/digi-form-file-upload.js
@designsystem-se/af/components/digi-form-filter.js
@designsystem-se/af/components/digi-form-input-search.js
@designsystem-se/af/components/digi-form-input.js
@designsystem-se/af/components/digi-form-label.js
@designsystem-se/af/components/digi-form-radiobutton.js
@designsystem-se/af/components/digi-form-radiogroup.js
@designsystem-se/af/components/digi-form-receipt.js
@designsystem-se/af/components/digi-form-select-filter.js
@designsystem-se/af/components/digi-form-select.js
@designsystem-se/af/components/digi-form-textarea.js
@designsystem-se/af/components/digi-form-validation-message.js
@designsystem-se/af/components/digi-header-avatar.js
@designsystem-se/af/components/digi-header-navigation-item.js
@designsystem-se/af/components/digi-header-navigation.js
@designsystem-se/af/components/digi-header-notification.js
@designsystem-se/af/components/digi-header.js
@designsystem-se/af/components/digi-icon-accessibility-deaf.js
@designsystem-se/af/components/digi-icon-accessibility-universal.js
@designsystem-se/af/components/digi-icon-apple.js
@designsystem-se/af/components/digi-icon-archive-outline.js
@designsystem-se/af/components/digi-icon-archive.js
@designsystem-se/af/components/digi-icon-arrow-back.js
@designsystem-se/af/components/digi-icon-arrow-down.js
@designsystem-se/af/components/digi-icon-arrow-left.js
@designsystem-se/af/components/digi-icon-arrow-right.js
@designsystem-se/af/components/digi-icon-arrow-sign-in.js
@designsystem-se/af/components/digi-icon-arrow-sign-out.js
@designsystem-se/af/components/digi-icon-arrow-up.js
@designsystem-se/af/components/digi-icon-at.js
@designsystem-se/af/components/digi-icon-bars.js
@designsystem-se/af/components/digi-icon-bell-filled.js
@designsystem-se/af/components/digi-icon-bell.js
@designsystem-se/af/components/digi-icon-book.js
@designsystem-se/af/components/digi-icon-bookmark-outline.js
@designsystem-se/af/components/digi-icon-bookmark-solid.js
@designsystem-se/af/components/digi-icon-bubble-ellipsis.js
@designsystem-se/af/components/digi-icon-bubble.js
@designsystem-se/af/components/digi-icon-building-outline.js
@designsystem-se/af/components/digi-icon-building-solid.js
@designsystem-se/af/components/digi-icon-bullseye.js
@designsystem-se/af/components/digi-icon-calculator-solid.js
@designsystem-se/af/components/digi-icon-calendar-alt-alert.js
@designsystem-se/af/components/digi-icon-calendar-alt.js
@designsystem-se/af/components/digi-icon-calendar.js
@designsystem-se/af/components/digi-icon-caret-circle-right.js
@designsystem-se/af/components/digi-icon-caret-down.js
@designsystem-se/af/components/digi-icon-caret-left.js
@designsystem-se/af/components/digi-icon-caret-right.js
@designsystem-se/af/components/digi-icon-caret-up.js
@designsystem-se/af/components/digi-icon-chart.js
@designsystem-se/af/components/digi-icon-chat.js
@designsystem-se/af/components/digi-icon-check-circle-reg-alt.js
@designsystem-se/af/components/digi-icon-check-circle-solid.js
@designsystem-se/af/components/digi-icon-check.js
@designsystem-se/af/components/digi-icon-checklist.js
@designsystem-se/af/components/digi-icon-chevron-down.js
@designsystem-se/af/components/digi-icon-chevron-left.js
@designsystem-se/af/components/digi-icon-chevron-right.js
@designsystem-se/af/components/digi-icon-chevron-up.js
@designsystem-se/af/components/digi-icon-clock.js
@designsystem-se/af/components/digi-icon-communication-play-solid.js
@designsystem-se/af/components/digi-icon-compress-alt.js
@designsystem-se/af/components/digi-icon-comunication-case.js
@designsystem-se/af/components/digi-icon-comunication-flag.js
@designsystem-se/af/components/digi-icon-comunication-graduate.js
@designsystem-se/af/components/digi-icon-comunication-play.js
@designsystem-se/af/components/digi-icon-cooperation.js
@designsystem-se/af/components/digi-icon-copy.js
@designsystem-se/af/components/digi-icon-danger-outline.js
@designsystem-se/af/components/digi-icon-download.js
@designsystem-se/af/components/digi-icon-dxa.js
@designsystem-se/af/components/digi-icon-edit.js
@designsystem-se/af/components/digi-icon-ellipsis.js
@designsystem-se/af/components/digi-icon-envelope-filled.js
@designsystem-se/af/components/digi-icon-envelope.js
@designsystem-se/af/components/digi-icon-exclamation-circle-filled.js
@designsystem-se/af/components/digi-icon-exclamation-triangle-filled.js
@designsystem-se/af/components/digi-icon-exclamation-triangle-warning.js
@designsystem-se/af/components/digi-icon-exclamation-triangle.js
@designsystem-se/af/components/digi-icon-expand-alt.js
@designsystem-se/af/components/digi-icon-external-link-alt.js
@designsystem-se/af/components/digi-icon-eye-slash.js
@designsystem-se/af/components/digi-icon-eye.js
@designsystem-se/af/components/digi-icon-facebook-square.js
@designsystem-se/af/components/digi-icon-file-add.js
@designsystem-se/af/components/digi-icon-file-document.js
@designsystem-se/af/components/digi-icon-file-excel.js
@designsystem-se/af/components/digi-icon-file-export.js
@designsystem-se/af/components/digi-icon-file-governing.js
@designsystem-se/af/components/digi-icon-file-pdf.js
@designsystem-se/af/components/digi-icon-file-powerpoint.js
@designsystem-se/af/components/digi-icon-file-remove.js
@designsystem-se/af/components/digi-icon-file-word.js
@designsystem-se/af/components/digi-icon-film.js
@designsystem-se/af/components/digi-icon-filter.js
@designsystem-se/af/components/digi-icon-folder-add.js
@designsystem-se/af/components/digi-icon-folder-directory.js
@designsystem-se/af/components/digi-icon-folder-open.js
@designsystem-se/af/components/digi-icon-folder.js
@designsystem-se/af/components/digi-icon-globe-filled.js
@designsystem-se/af/components/digi-icon-globe.js
@designsystem-se/af/components/digi-icon-headphones.js
@designsystem-se/af/components/digi-icon-heart-solid.js
@designsystem-se/af/components/digi-icon-heart.js
@designsystem-se/af/components/digi-icon-history.js
@designsystem-se/af/components/digi-icon-home.js
@designsystem-se/af/components/digi-icon-image.js
@designsystem-se/af/components/digi-icon-info-circle-solid.js
@designsystem-se/af/components/digi-icon-input-select-marker.js
@designsystem-se/af/components/digi-icon-instagram.js
@designsystem-se/af/components/digi-icon-job-suggestion.js
@designsystem-se/af/components/digi-icon-language-outline.js
@designsystem-se/af/components/digi-icon-language.js
@designsystem-se/af/components/digi-icon-laptop-phone.js
@designsystem-se/af/components/digi-icon-lattlast.js
@designsystem-se/af/components/digi-icon-licence-bus.js
@designsystem-se/af/components/digi-icon-licence-car.js
@designsystem-se/af/components/digi-icon-licence-motorcycle.js
@designsystem-se/af/components/digi-icon-licence-truck.js
@designsystem-se/af/components/digi-icon-lightbulb.js
@designsystem-se/af/components/digi-icon-linkedin-in.js
@designsystem-se/af/components/digi-icon-list-ul.js
@designsystem-se/af/components/digi-icon-lock.js
@designsystem-se/af/components/digi-icon-marker-filled.js
@designsystem-se/af/components/digi-icon-marker.js
@designsystem-se/af/components/digi-icon-media-course.js
@designsystem-se/af/components/digi-icon-media-podcast.js
@designsystem-se/af/components/digi-icon-microphone-off.js
@designsystem-se/af/components/digi-icon-microphone.js
@designsystem-se/af/components/digi-icon-minus.js
@designsystem-se/af/components/digi-icon-move.js
@designsystem-se/af/components/digi-icon-news.js
@designsystem-se/af/components/digi-icon-notification-error.js
@designsystem-se/af/components/digi-icon-notification-info.js
@designsystem-se/af/components/digi-icon-notification-succes.js
@designsystem-se/af/components/digi-icon-notification-warning.js
@designsystem-se/af/components/digi-icon-online-computervideo.js
@designsystem-se/af/components/digi-icon-online-interview.js
@designsystem-se/af/components/digi-icon-online-meeting.js
@designsystem-se/af/components/digi-icon-online-task.js
@designsystem-se/af/components/digi-icon-online-video.js
@designsystem-se/af/components/digi-icon-open-source.js
@designsystem-se/af/components/digi-icon-palette.js
@designsystem-se/af/components/digi-icon-paperclip.js
@designsystem-se/af/components/digi-icon-paste.js
@designsystem-se/af/components/digi-icon-pen.js
@designsystem-se/af/components/digi-icon-phone-hangup.js
@designsystem-se/af/components/digi-icon-phone.js
@designsystem-se/af/components/digi-icon-plus.js
@designsystem-se/af/components/digi-icon-pod.js
@designsystem-se/af/components/digi-icon-print.js
@designsystem-se/af/components/digi-icon-read.js
@designsystem-se/af/components/digi-icon-redo.js
@designsystem-se/af/components/digi-icon-scale.js
@designsystem-se/af/components/digi-icon-screensharing-off.js
@designsystem-se/af/components/digi-icon-screensharing.js
@designsystem-se/af/components/digi-icon-search.js
@designsystem-se/af/components/digi-icon-send-outline.js
@designsystem-se/af/components/digi-icon-send-solid.js
@designsystem-se/af/components/digi-icon-settings.js
@designsystem-se/af/components/digi-icon-share-alt.js
@designsystem-se/af/components/digi-icon-share-chain.js
@designsystem-se/af/components/digi-icon-sign.js
@designsystem-se/af/components/digi-icon-sliders-h.js
@designsystem-se/af/components/digi-icon-sokkandidat.js
@designsystem-se/af/components/digi-icon-sort-down.js
@designsystem-se/af/components/digi-icon-sort-up.js
@designsystem-se/af/components/digi-icon-sort.js
@designsystem-se/af/components/digi-icon-spinner.js
@designsystem-se/af/components/digi-icon-star-reg.js
@designsystem-se/af/components/digi-icon-star.js
@designsystem-se/af/components/digi-icon-suitcase-outline.js
@designsystem-se/af/components/digi-icon-suitcase-solid.js
@designsystem-se/af/components/digi-icon-system-assistance.js
@designsystem-se/af/components/digi-icon-table-column.js
@designsystem-se/af/components/digi-icon-table-row.js
@designsystem-se/af/components/digi-icon-table.js
@designsystem-se/af/components/digi-icon-task-done.js
@designsystem-se/af/components/digi-icon-toggle-off.js
@designsystem-se/af/components/digi-icon-toggle-on.js
@designsystem-se/af/components/digi-icon-trash.js
@designsystem-se/af/components/digi-icon-twitter.js
@designsystem-se/af/components/digi-icon-tyck-till.js
@designsystem-se/af/components/digi-icon-unlock.js
@designsystem-se/af/components/digi-icon-update.js
@designsystem-se/af/components/digi-icon-upload.js
@designsystem-se/af/components/digi-icon-user-add.js
@designsystem-se/af/components/digi-icon-user-alt.js
@designsystem-se/af/components/digi-icon-user-edit.js
@designsystem-se/af/components/digi-icon-users-solid.js
@designsystem-se/af/components/digi-icon-validation-error.js
@designsystem-se/af/components/digi-icon-validation-success.js
@designsystem-se/af/components/digi-icon-validation-warning.js
@designsystem-se/af/components/digi-icon-videocamera-off.js
@designsystem-se/af/components/digi-icon-videocamera.js
@designsystem-se/af/components/digi-icon-volume.js
@designsystem-se/af/components/digi-icon-web-tv.js
@designsystem-se/af/components/digi-icon-webinar.js
@designsystem-se/af/components/digi-icon-wifi-signal0.js
@designsystem-se/af/components/digi-icon-wifi-signal1.js
@designsystem-se/af/components/digi-icon-wifi-signal2.js
@designsystem-se/af/components/digi-icon-wifi-signal3.js
@designsystem-se/af/components/digi-icon-window.js
@designsystem-se/af/components/digi-icon-x-button-outline.js
@designsystem-se/af/components/digi-icon-x-button.js
@designsystem-se/af/components/digi-icon-x.js
@designsystem-se/af/components/digi-icon-youtube.js
@designsystem-se/af/components/digi-info-card-multi-container.js
@designsystem-se/af/components/digi-info-card-multi.js
@designsystem-se/af/components/digi-info-card.js
@designsystem-se/af/components/digi-layout-block.js
@designsystem-se/af/components/digi-layout-columns.js
@designsystem-se/af/components/digi-layout-container.js
@designsystem-se/af/components/digi-link-button.js
@designsystem-se/af/components/digi-link-external.js
@designsystem-se/af/components/digi-link-internal.js
@designsystem-se/af/components/digi-link.js
@designsystem-se/af/components/digi-list.js
@designsystem-se/af/components/digi-loader-skeleton.js
@designsystem-se/af/components/digi-loader-spinner.js
@designsystem-se/af/components/digi-logo.js
@designsystem-se/af/components/digi-media-figure.js
@designsystem-se/af/components/digi-media-image.js
@designsystem-se/af/components/digi-navigation-breadcrumbs.js
@designsystem-se/af/components/digi-navigation-pagination.js
@designsystem-se/af/components/digi-navigation-sidebar-button.js
@designsystem-se/af/components/digi-navigation-sidebar.js
@designsystem-se/af/components/digi-navigation-vertical-menu-item.js
@designsystem-se/af/components/digi-navigation-vertical-menu.js
@designsystem-se/af/components/digi-notification-alert.js
@designsystem-se/af/components/digi-notification-error-page.js
@designsystem-se/af/components/digi-progress-circle.js
@designsystem-se/af/components/digi-progress-indicator.js
@designsystem-se/af/components/digi-progress-list-item.js
@designsystem-se/af/components/digi-progress-list.js
@designsystem-se/af/components/digi-progressbar.js
@designsystem-se/af/components/digi-quote.js
@designsystem-se/af/components/digi-table.js
@designsystem-se/af/components/digi-tablist-panel.js
@designsystem-se/af/components/digi-tablist.js
@designsystem-se/af/components/digi-tag-media.js
@designsystem-se/af/components/digi-tag.js
@designsystem-se/af/components/digi-title-logo.js
@designsystem-se/af/components/digi-tools-feedback-banner.js
@designsystem-se/af/components/digi-tools-feedback-rating.js
@designsystem-se/af/components/digi-tools-feedback.js
@designsystem-se/af/components/digi-tools-theme-provider.js
@designsystem-se/af/components/digi-typography-heading-jumbo.js
@designsystem-se/af/components/digi-typography-meta.js
@designsystem-se/af/components/digi-typography-preamble.js
@designsystem-se/af/components/digi-typography-time.js
@designsystem-se/af/components/digi-typography.js
@designsystem-se/af/components/digi-util-breakpoint-observer.js
@designsystem-se/af/components/digi-util-detect-click-outside.js
@designsystem-se/af/components/digi-util-detect-focus-outside.js
@designsystem-se/af/components/digi-util-intersection-observer.js
@designsystem-se/af/components/digi-util-keydown-handler.js
@designsystem-se/af/components/digi-util-keyup-handler.js
@designsystem-se/af/components/digi-util-mutation-observer.js
@designsystem-se/af/components/digi-util-resize-observer.js
@designsystem-se/af/dist/index.cjs.js
@designsystem-se/af/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@designsystem-se/af) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

# 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 2025