Balsamiq Community Discussion

Please add a Pill control

Can you add a pill control? It’s like a button with a text caption on its face, but the left and right ends are round. It should optionally include an icon to the left or right of the text. Like pill badges in Bootstrap (https://getbootstrap.com/docs/5.0/components/badge/#pill-badges)

Hi there @Gary_Coker,

Thanks so much for the post and welcome to the forums. This is a tough one. Given our vision as a low-fidelity wireframing tool as opposed to, say, a more complex, more pixel-accurate prototyping or design tool, we’re really focused on the early stages of the design process where we’re helping communicate “there will be a button here” and we’re not really concerned, at this stage, with the specific implementation or appearance of the button.

As such, adding framework-specific controls to the app is unlikely but that doesn’t mean you can’t still achieve your goal.

Taking a step back, our user contributed collection of symbols and templates - https://wireframestogo.com/ - can help to address missing controls. There is a Bootstrap Controls symbol library on Wireframes to Go but, in this case, it does not have the specific button you need - .rounded-pill. I mention it just for completeness.

As a workaround you could create your own pill using other, fundamental controls. It might look something like this:

CleanShot 2021-08-12 at 09.33.12

You could, optionally, save the controls you make as Symbols for convenient reuse.

I’ve attached a BMPR project containing those example controls so that you can see how they’re made.

Pills.bmpr (56 KB)

1 Like

Thanks so much for the response! I actually have implemented my own pills exactly the same way as you did, and I use them as symbols. The downside of course is that if the length of the text changes, then the elements that make up the pill must be manually adjusted, which is time-consuming.

Pills are a very common UI element these days, very similar to badges, so I wouldn’t consider them framework-specific. A bonafide pill and/or badge control in Balsamiq would save many designers lots of time in their wireframing, so please consider making this request a higher priority. Thanks again!

1 Like

A “Pill” render mode for Tabs would be a nice enhancement.

Yup, I dig it.

Are we thinking the tab bar(s) and the button bar @paulshoughton?

@Brendan - I could see the tab bar and button bar being combined into a single control with variants for:

  • Tab
  • Button bar
  • Pill bag
2 Likes