I have a button component (in React) that I want to make so that it would position its content centrally while allowing the specification of left or right icons. The content must be positioned in the center relating to the parent and respect each icon (optionally) if provided.
The problem I’m facing is that I’m not sure what’s the best way to make sure that the content can overlap on the next line when it reaches the icon.
Below are a couple of images of what I’m trying to achieve
I was trying to use absolute positioning for both elements with transform: translateX to adjust the position of the content, but it doesn’t work in case if the content take the full space or longer than expected. Also, was trying to use flexbox, but it doesn’t allow to align single element in relation to parent without taking into account the icons. Setting a padding on left or right side (depending on the icon’s width) doesn’t seem to work either as it shifts the content and breaks the central alignment
Would much appreciate any advice or direction which I can try to make it work. Trying to avoid going with any "hacky" Javascript based solution where I would have to calculate each container 🙏
2
Answers
You can create a css class incorporating grid design system & also depending on style requirement you can add ellipis to show dots for long button text
I’m not wholly clear what behaviour you want from the text when it wraps, but maybe you want something like this. Basically, add a
::before
and/or::after
pseudo element to stand in for any missing icon. Set their height to match the height of the icon. Set the flex-basis to the width of the icon and the flex-grow to 0, so that when the button text is short the pseudo-element will take up the same space as the icon would, and the text will be centered. Also set their flex-shrink to a large number so that they rapidly shrink when the text becomes too long to fit on one line between the icons.