fullWidth for different Button Variants

[AleenaSA]

I came across this difference in behaviour for Link variant Button vs others. When the fullWidth prop is set, as seen in the screenshot, the attribute justify-content is set to center, which is missing for Button with variant set as Link.

Not sure if this is an intended behaviour or a bug. Our use case is to align the both the buttons in the center for a better UX on mobile.

But then the loading spinner is centrally aligned

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

---

Here are some similar discussions:

• Column alignment when using a link style button (updated: 2023-02-02T16:22:21Z, similarity score: 0.85)
• Button with as="a" attribute not showing the externalLink Icon (updated: 2021-08-12T21:59:55Z, similarity score: 0.84)
• Question about UI when it migrated from v1 to v2 - Answer (updated: 2023-08-25T19:42:57Z, similarity score: 0.84)

[TheSisb]

Hi @AleenaSA,

Link style Buttons are set to display: inline-block, so that they can be used inline with other text. If it behaved like regular Buttons it wouldn't be possible to make it inline with other text.

You should be able to achieve your intended UI by wrapping the Button in a Box that is display: flex with the correct justifyContent and alignItems