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.

320 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

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

    31 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • AnnaAnna 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.

      • MatzaMatza 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 …

      • MatzaMatza 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.

      • MatzaMatza 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 louapsebastien 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 louapsebastien 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 KnellDavid 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. :)

      • Keyan MynhardtKeyan Mynhardt commented  ·   ·  Flag as inappropriate

        Agreed. The ability to type directly into an object makes it a lot easier to group and move objects around and reduce clutter : )

      • Anonymous commented  ·   ·  Flag as inappropriate

        Would be nice to be able to create a text box with padding and a background colour. Quite often we draw out a rectangle then add a text box over the top of it, but then you have to line them up. It would be faster if we could just use one object. You can do this in InDesign and it saves a lot of time and makes the design more consistent.

      • Robert CălinRobert Călin commented  ·   ·  Flag as inappropriate

        Example:
        - you have a button
        - it has a background or border or shadow
        - it has a text or icon inside
        - when changing the text or icon, the container should adapt to the content, it should maintain the padding

      • MitsukiMitsuki commented  ·   ·  Flag as inappropriate

        or I'd like to add background color, padding, border color on text object....

      • VadimVadim commented  ·   ·  Flag as inappropriate

        Yes! I agree, this is very important feature which can save a ton of time.

      • Karl MochelKarl Mochel commented  ·   ·  Flag as inappropriate

        Handle text as an attribute of a shape, not as a separate graphic element.

        - In a UX text is most often bound to a visual affordance - button, tab, container etc. It is just an attribute of a shape.
        - CSS lets the user style DIVS so they can be all of these things.
        - It is annoying to have to manage graphic attributes of text - vertical and horizontal alignment, padding, margins, size, wrapping - of text by for buttons, tabs, containers, etc separately from the shape that defines them.
        - Text and the affordances they label or fill should be defined by their relationship.

      • PBPB commented  ·   ·  Flag as inappropriate

        Please add options to apply color properties to text frames, not just to text inside them.

      • PBPB commented  ·   ·  Flag as inappropriate

        Please add options to apply color properties to text frames, not just to text inside them.

      • MichaelMichael commented  ·   ·  Flag as inappropriate

        If we could add text to a box it would function the same as this request. This would save a lot of time.

      ← Previous 1

      Feedback and Knowledge Base