Post

How do you make a button that doesn't change it's width when it's in a loading state? Use CSS Grid to stack items, and visibility: hidden to hide/show spinner! This approach allows the largest item to size the button, and keeps the button text accessible

Kyle Shevlin (he/him)

@kyleshevl.in

11 Dec 2024

I absolutely position my spinner in the center of the button and then set the text to opacity: 0. No layout shift. Been doing that before Grid was even a thing.

Wes Bos

@wesbos.com

11 Dec 2024

It's good, but this is better in some cases, and is accessible. I address both approaches in the video

Josh Collinsworth

@collinsworth.dev

Re: accessibility: while this is ok, it's generally better to use actual text (probably a `.sr-only` span) than `aria-label`. Text is more easily picked up by ATs universally, and can also be translated to other languages more easily than HTML attributes. Plus: don't use ARIA if you don't have to.

11/12/24, 7:40 pm0 reposts6 likes

No replies yet.