A! If it's the selected state, you want to make sure that everything is left aligned the same way so that it's easier to read. Although I can see you using B as the mouse over / hover effect.

Designers! How are we aligning side panel buttons? A or B?

Maybe that could work! Another option is not to use the pill shape and use a dot to the left instead. So the dot being out of bounds would be subtle compared to the full pill.

but then when you hover the animation reveals the pill, and it becomes clunky cause the texts inside would move left right with every hover...

that would still need extra space on the left regardless if it's round or straight...

A, but have you though about making it only round on the right, and straight on the left? That would help

My concern is the alignment with the other elements. Both feel odd for different reasons.  Maybe default states should be aligned perfectly, and the hover effect goes out of bounds left side?

B — since the default state does not have the active menu, it will be clear why this offset occurred when you start interacting with it

i will play around with that idea, it would be cleaner as well

B because I believe in perfectly aligned things

Posts