You just received instructions from your client asking to rename all buttons with the text “SUBMIT” in them to “CLICK HERE FOR LAUGHS”. You aren’t too pleased because it is the weekend and there’s a party you cannot miss. In this case at least, you have room for cheer. With a few simple steps, you can now create a button that resizes itself based on the text inside. Just in case your client has a quick change of heart (and mind), you will still party. Let’s get started. Create a rectangle that will be the container for your text. Type “SUBMIT” using the Text Tool. Drag the Text into the rectangle and position it. Don’t worry about the exact padding. Now, select the objects and use Ctrl+G/Cmd+G to group the objects. In the Properties Inspector panel, enable the Padding option. Ensuring that the layer for text is selected, change text to “CLICK HERE FOR LAUGHS” Did the rectangle resize? Good. Now that you are a pro at creating magic buttons, look at all the padding options and play around with them. See https://helpx.adobe.com/xd/help/set-fixed-padding-for-components-groups.html for more info and for the download file.

Community Manager

Question

Create a button that resizes based on the text inside - XD 26

Forum|Forum|6 years ago
January 28, 2020
6 replies
22395 views

You just received instructions from your client asking to rename all buttons with the text “SUBMIT” in them to “CLICK HERE FOR LAUGHS”. You aren’t too pleased because it is the weekend and there’s a party you cannot miss.

In this case at least, you have room for cheer. With a few simple steps, you can now create a button that resizes itself based on the text inside. Just in case your client has a quick change of heart (and mind), you will still party.

Let’s get started.

Create a rectangle that will be the container for your text.
Type “SUBMIT” using the Text Tool.
Drag the Text into the rectangle and position it. Don’t worry about the exact padding.
Now, select the objects and use Ctrl+G/Cmd+G to group the objects.
In the Properties Inspector panel, enable the Padding option.
Ensuring that the layer for text is selected, change text to “CLICK HERE FOR LAUGHS”

Did the rectangle resize? Good.

Now that you are a pro at creating magic buttons, look at all the padding options and play around with them. See https://helpx.adobe.com/xd/help/set-fixed-padding-for-components-groups.html for more info and for the download file.

This topic has been closed for replies.

Ertuğrul24892880d5b8

New Participant

Hello, thank you for your sharing. Box radius is increasing with text. How can I lock the box radius when using responsive feature.

Glenn Lignel

New Participant

Hi,

As i see from your example, you're trying oval borders instead of the standard rounded border. I managed to aquire the result you're looking for in this way:

In my example I work with 2 ovals & a rectangular center, union combined

You can download an example source file from my personal website:
https://www.glennlignel.be/design/Responsive-button-with-oval-borders.xd

R

romusrx

Known Participant

This sounds like a pretty good improvement. But on XD 34, it works only on master components. As soon as you create an instance of a component, which is exactly the purpose of components, when you change the text of the default state, this change is not propagated to child states. So...it's useless.

Since months, I try to alert the XD components system is totally broken, and nothing changes.

BlackR4inbow

Inspiring

Adobe's UX has become a disaster over the past 5 years.

A scalable button, that's easy to create that supports an icon is a very common need.

I've created them in the past. Then a new release comes along, and things no longer work the same way and seemingly aren't possible. That is, at least without having to learn a new approach.

Also, Adobe, any update on Color Profile Management that we've been asking for? It's been years...still no update.

S

Sean23663411ijsq

New Participant

I have had to switch to it for work and it is a nightmare. I am constantly having to google for workarounds to basic functions and needs. What an embarassment...

W

wwwvinz

Inspiring

Hi,

Margins are great imporvement, but.... It doesn't work if the background button is a component. My margins stays at 0

W

wwwvinz

Inspiring

foubnd a workaround : ctrl+g to create a group of your component and you're good to go

A

Arlo Software

New Participant

What we really want is to use that button as a component. This only solves half the problem.

When you create another button from the component and change the text, the button resizes correctly, but you have to do the same for each and every state of that component. Still quite annoying experience.

F

feejin

New Participant

I just ran into the same thing. Padding and responsive resize work fine, having to change text for every state for every instance is just useless.

A

appca4117842

Participating Frequently

+1 would like to see this feature, I have also just encountered this issue.

F

feejin

New Participant

Is it possible to have the icon on the right using this? In my example below the icon just stays in place as the padding grows, the icon is set to use responsive resize and fixed to the right hand size.

FrancoBits

Brainiac

Maybe the anchors for the responsive layout can help

FrancoBits

Brainiac

Thank you!

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