[POC] Button micro-interactions

[NicklasWei]

Work in progress.

Målet är att få knappar att ge mer feedback vid interaktioner. focus styling appliceras istället vid focus-visible för knapp så fokusramen enbart är synlig man tabbar och inte vid musklick. hover styling har ändrats samt active styling har lagts till. Experimentering pågår för visuell skiftning av position för knappar vid nedtryckt läge (active), men verkar potentiellt finnas problem med text som kan få visuella artifakter vid sådan animering.

Har cherry-pick in den nya utökade paletten då det annars saknas en del färger för att få det att se ok ut.

Se sandbox: https://forsakringskassan.github.io/designsystem/pr-preview/pr-1284/vue-sandbox/#/
Se knapp på sajten: https://forsakringskassan.github.io/designsystem/pr-preview/pr-1284/components/button.html

Todo:

• Styling för inverterad tertiärknapp saknas.
• använd transition tid variabel (short?)
• Border blinkar efter async är klar för tertiärknapp (alla sorter).
• Samma hover/active för startpunkt/entrypoint utbruten
• Bryt ut border radius ändringen för fokus
• Lägg till focus variablerna men med oförändrad styling som default utbruten
• Förfining/krav

[github-actions]

CHANGELOG

Based on commits in this Pull Request this will create a minor release and the following entries will be added to the changelog:

---

Features

• add new hover and active style on buttons (refs SFKUI-7690) 3dd226f
• buttons use `focus-visible` (refs SFKUI-7690) 96d4b24
• focus indicator keep border radius (refs SFKUI-7690) 082570c

---

If this is not correct you can amend the commit message(s).

Read more about the release process (swedish).

[github-actions]

Artifact sizes

Artifact sizes in this build (unchanged artifacts collapsed below).

Artifact	Files	Size	Change
@fkui/date (esm)	1 file(s)	32.2KiB → 32.2KiB (+6B)	+0.02%
@fkui/design	2 file(s)	193.3KiB → 194.1KiB (+808B)	+0.41%
@fkui/logic (esm)	1 file(s)	162.7KiB → 162.7KiB (+14B)	+0.01%
@fkui/vue (esm)	1 file(s)	1.1MiB → 1.1MiB (+2.1KiB)	+0.18%
@fkui/vue (FBadge bundle)	1 file(s)	294.3KiB → 294.7KiB (+405B)	+0.13%

3 unchanged artifacts

Artifact	Files	Size
@fkui/vue/cypress	1 file(s)	67.6KiB
@fkui/vue/selectors	1 file(s)	5.9KiB
@fkui/vue-labs (esm)	1 file(s)	145.9KiB

[github-actions]

Förhandsgranskning 🐛 🔍

Dokumentation och exampel applikationer finns att förhandsgranska på:

Sida	URL
Dokumentation	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1284/
Vue Sandbox	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1284/vue-sandbox
Applikationsmall	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1284/examples/page-layout

Exempel för testning:

Sida	URL
Tabell	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1284/examples/table

---

Senast uppdaterad 2026-05-12 08:18 UTC i gh-pages.

[johancarnegard]

Tanken är som sagt att vi inte byter utseende på komponenter när de får fokus. Under förutsättning att den visuella skillnanden mellan fokus/inte fokus är tillräcklig. Men det vore bra om stylingen hanterades via temat. Tex borde bakgrundsfärgen för primärknapp med fokus kopplas till --fkds-color-action-background-primary-focus. Just nu skulle den token peka på samma palettfärg som --fkds-color-action-background-primary-default