Missing Button loading state in Figma

[eirikbacker]

Button has a built in loading state, but there is no sketches for it in Figma? :)

[Viveca24]

I have created and tested an animated spinner for the button's loading state in Figma.

What has been done:

• [x] Animated the spinner for the button's loading state.
• [x] Designed the animated spinner for all button sizes (small, medium, large) and states (default, hover, active, disabled).
• [x] Tested across all states (default, hover, active, disabled) and sizes to ensure consistent behavior and appearance.
• [x] Created examples in Designsystemet Core UI Kit

[Viveca24]

I'm not sure if having multiple lines in a button is considered a good UX practice. But I would like to know what you think about the placement of the spinner: should it be centered in the middle of the button, as shown in the image, or placed next to the first line of text when the button contains two lines? @mrosvik & @Febakke

[mrosvik]

In Storybook it looks like the icon and the loader is centered. I think we should keep it this way, since the padding above text is very small, and the loader will probably not be aligned with the first line of text?

[Viveca24]

I have implemented a spinner that supports all colors, utilizing the same 'sub-tokens' for consistency across different colors.

Background: color.<variable>.surface-default Stroke: color.<variable>.border-default

[Febakke]

Skal spinner være synlig på hover? Vi har satt opp prototypingsoppførsel på button komponenten og ser ut til å ikke fungere så bra med spinner. Det gir kanskje ikke mening at en knapp med loader får hover?

Alternativer:

• Legg til spinner på alle states?
• La være as is, vil se litt buggy ut i prototyper
• Lagg spinner button som egen variant hvor den ikke er koblet til hover med prototyping

[mrosvik]

Vi går for alternativ 2: La være as is, vil se litt buggy ut i prototyper. Vi kan evt. utbedre dette senere ved behov.