button with icon + number

[salvuchi]

I'm trying to create a component that looks like this:

I don't know how to achieve this alignment:

- If the number is smaller or bigger, I want the circle moving next to the number and still be in the center of the grey rectangle

Any ideas? Thanks!

[AkinGn]

Hmm I'd do it this way, if I'm not missing something, I think that's the best way to keep the left and right padding of the button same regardless of the length of the number:
1- Group the circle and the number
2- Center the group to the button background and decide the empty space you need, adjust the button bg size if necessary and center align the group again.

3- After deciding that the padding the button has is enough, group the button bg and the group we already have (circle and the text) or better, make them a component.

4- Tick the padding option in the right sidebar. That way the component/button would keep the padding same. 
You can check this video if you're not familiar with the padding in XD: https://www.youtube.com/watch?v=_YGskIKPAPg
Hope this helps!

[salvuchi]

thanks for your answer. this option works fine and I didn't know much about padding so I learned something new.

unfortunately I didn't explain myself properly, this option is not really ideal for me, because I need the button width to stay locked, and just make the circle + number move inside according to the size, so it's always positioned in the center. my rectangle is big enough to allow for certain amount of numbers, but the numbers should be able to be changed and stay in the center. my button in my layout cannot change the width because it's located in a locked area with things around.
I guess what I need is not possible to do in XD at the moment, right?

[AkinGn]

Hmmm I see, centering both circle and the number, that doesn't look possible to me, maybe there's a way that I can't think of. I guess the only option is just selecting the circle and the number, grouping and centering manually each time number changes. One other option might be, typing a circle with a font that has that character (you can check here https://www.alt-codes.net/circle-symbols and copy-paste into your text), setting its size and horizontal space seperately but in the same text box, and then switching to the body text font & styling, centering that single text element to the button. That's the only way I can think of now, hope this helps!

[salvuchi]

actually that is a nice idea and it should do the trick for now! thank you