button with icon + number

Forum|Forum|3 years ago
April 25, 2022
1 reply
617 views

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!

This topic has been closed for replies.

AkinGn

Community Expert

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!

salvuchiAuthor

Participant

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

Community Expert

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded