Request details

Button tool - style text box with border, background color, padding (auto resized when text changes)

To speed workflow it would be good to have button tool in the sidebar. In the property inspector you'd have the ability to specify the top,bottom, left and right padding. the width of button would dynamically resize as you type the button's label.

481 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)

    We’ll send you updates on this idea

    pamjam shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    44 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • joe commented  ·   ·  Flag as inappropriate

        It would be really beneficial if you could add a background color to a text.

      • Matza commented  ·   ·  Flag as inappropriate

        Symbol overrides are ok, but the button-width and height stay the same and has to be adapted by hand. Also longer texts (button labels)

      • Anonymous commented  ·   ·  Flag as inappropriate

        Maybe I'm missing something but I want to add a background color to a text box. This would be useful for creating things like buttons. This is one of the most requested features for Sketch that they refuse to implement.

      • Daniel O'Neil commented  ·   ·  Flag as inappropriate

        I would love a slightly more generic version of this feature to support adding text to shape for things like a button, form field, sticky note, schematic block, and flow diagram shape.

      • Wiredframe commented  ·   ·  Flag as inappropriate

        This would be possible when the general responsiveness / constraints features will be available. I hope soon.

      • Christoph Mauerhofer commented  ·   ·  Flag as inappropriate

        Axure treats text elements and rectangles/boxes basically the same, you can style color, border etc. and decide if you want to have text inside, define paddings and if the width is fixed or adapting to content.

      • Pablo Sara commented  ·   ·  Flag as inappropriate

        YESSS! Please! This would makes everything faster. Currently 2 elements are needed if you want a shape with text inside. We could have it in only one step.

      • Scott Ruth commented  ·   ·  Flag as inappropriate

        Yes please. I wish XD had something like the "Relabel Button" plugin for Sketch:

        https://github.com/kenmoore/sketch-relabel-button

        When designing SOFTWARE, you need to design buttons, LOTS OF BUTTONS! If Adobe XD is a tool for designing digital content then we need more power in this area. I've probably spent hundreds of hours of my life just resizing buttons to fit their labels. It's tedious, and Sketch has an elegant solution that should be native in XD.

      • Anonymous commented  ·   ·  Flag as inappropriate

        Putting text inside an object is standard Adobe software practice. Not having this capability in Sketch drives me nuts.

        I can do this in Photoshop and Illustrator to make a button. Why not in XD?

      • Anna commented  ·   ·  Flag as inappropriate

        Would be great to have buttons work like they do with html. I was shocked when I started using this and realized you have to manually create buttons like you would in Photoshop or Illustrator. If you want us to replace those apps with this for prototyping, we shouldn't need to manually create such a common ui element.

      • Matza commented  ·   ·  Flag as inappropriate

        That's missing in Sketch, too … No plunging is working fine and fast. I have to press a key-shortcut after changing text! But the frame has to resize in the same time I'm changing the text …

      • Matza commented  ·   ·  Flag as inappropriate

        Yes, for buttons this would be cool. But for any other Textboxes (white colored text on red ground) thats nice. No more exakt position of a text box (without background) on a colored rectangle, just adding 2 2 2 2 (padding or example) to the text box.

      • Matza commented  ·   ·  Flag as inappropriate

        YES please!!! And you'd have the ability to say if the text box (or text) changes its width/hight to the left/top or right/bottom or both (centered)

      • sebastien louap commented  ·   ·  Flag as inappropriate

        Hi Elaine,
        I have the same request.
        If you look at tools like Axure, (the UX is not super good) but they have small details that is killing some current tools.
        for example they considered the test as a text+rectangle.

        By doing so when you create a button you don't need to add a rectangle + a test. You can have only 1 item that can have different color text + color shape.

        It has the strong added value that you can configure the padding (horizontal and vertical) and the size of the shape can be automatically adapted to the text size.

        As more than 50% of a prototype is just text + rectangle, it limits a lot the number of items in the page and improve the effiency to use/modify them. (for button/tab/text areas it is a killer feature)

        I'll also post my comment on the link you've added.

      • sebastien louap commented  ·   ·  Flag as inappropriate

        Hi Elaine,
        I have the same request.
        If you look at tools like Axure, (the UX is not super good) but they have small details that is killing some current tools.
        for example they considered the test as a text+rectangle.

        By doing so when you create a button you don't need to add a rectangle + a test. You can have only 1 item that can have different color text + color shape.

        It has the strong added value that you can configure the padding (horizontal and vertical) and the size of the shape can be automatically adapted to the text size.

        As more than 50% of a prototype is just text + rectangle, it limits a lot the number of items in the page and improve the effiency to use/modify them. (for button/tab/text areas it is a killer feature)

        I'll also post my comment on the link you've added.

      • David Knell commented  ·   ·  Flag as inappropriate

        If a text element has padding, background color, and border radius attributes, then there's your button! Excellent! You guys are really good at making interactions intuitive. Please continue that level of quality for this feature. It could easily be an awkward interaction because there are two places you can edit a text object: in the main window by dragging-and-dropping and in the inspector pane. Pressing Ctrl, Cmd, or Option and then dragging the borders of a text element may be an intuitive way to create/change the object's padding. Anyway, I trust you guys. :)

      ← Previous 1 3

      Feedback and Knowledge Base