18

I call them "tag blocks" but I don't think that's correct. The pattern is a block of textual information with the X to remove it. It can be seen in some places after adding a file to let you remove the file.

Pinterest uses this pattern to section off the search terms.

Pinterest


For Best Buy they show up after you select filters from the facets on the left.

Best Buy

Improve this question
2
  • 5
    these are called: TAGS !
    – Fattie
    Sep 28, 2015 at 20:12
  • They're all tags in tag listings. The first are description tags, the second are filter tags
    – Zach Saucier
    Sep 29, 2015 at 13:15

7 Answers 7

Reset to default
12

They receive many names depending on the script you use, there seems NOT to be a consensus on a single specific name. Just to illustrate different options, here you have the names and link to the script that generates these blocks.

Tags Input

Token Input

Tag Selector

Select Box and also select box

There seems to be some kind of consistent naming around the tag and select terms, however it's not definitive. Furthermore, since most of these plugins (if not all) use JQuery and "selector" is a totally different thing in JQuery (and HTML5) while select is even more confusing, I guess something like tag box would be the more appropriate option. Personally, I call them closable terms boxes

These are not tags

To be clear: these are not tags, nor are these select, these are not boxes, these are not selectors. All of this terms have very specific definitions, none of them apply to the question entirely, only in part.

Furthermore, this element is NOT always a tag, it could be a category, or a custom taxonomy or a live search term.

Anatomy of element

This element is composed of at least 3 different sub-elements: a visual one, a taxonomy/IA one and an action one.

The visual one is the box or boundary that contains the tag or filter term plus the close element, the taxonomy one is the term itself (eg, a tag), and the action one is the close element and in some cases, a handle to drag an re-arrange.

Functionally, it's an input element if you work with autocomplete search or the likes, but if the terms were added by an admin, they are select since the user can only select from a pre-defined list of terms.

In short

As said above, there's no consensus about it. If you're looking to properly communicate this element to someone, it's reasonable to call them by combining 2 or more of the compounding parts

Improve this answer
4
  • 4
    "... this element is NOT always a tag, it could be a category, or a custom taxonomy ..." < but isn't a category or taxo just a series meta tags positioned within an IA? Live search is a different matter, but I don't recall seeing this presentation used in that circumstance often.
    – plainclothes
    Sep 28, 2015 at 21:43
  • 1
    @plainclothes, I have a very different understanding of what a taxonomy is in terms of structural organization, but I understand what you mean. As a matter of fact, I tried to provide a more known approach (eg, the IA widely known CMSs use, such as WordPress or Joomla) than what I understand, but what you say is correct depending the paradigm you want to use
    – Devin
    Sep 28, 2015 at 21:54
  • I'd argue that they are always a tag, just different types of it. Sometimes description tags, sometimes filter tags, sometimes category tags, etc.
    – Zach Saucier
    Sep 29, 2015 at 13:18
  • 1
    In material design, they're called Chips.
    – Seiyria
    Sep 29, 2015 at 13:35
5

They're called tags or tag buttons.

It's so inherent in so many OSs that you can just call them tags. We just had a client saying they want dismissable tags in such and such ... so you could perhaps refer to them as that more fully.

Great question!

enter image description here

Improve this answer
4

Material design called them "Chips". https://material.io/guidelines/components/chips.html

Improve this answer
2

Breadbox

Russell1 calls this breadbox although in the book these are styled a plain list rather than tags. But that's a stylistic difference (see the Your Selection box):

A screenshot of the food network site, where a box with current filters and an option to remove each is given

1Russell-Rose, T., 2013. Designing the Search Experience. Morgan Kaufmann, Amsterdam.

Improve this answer
2
  • 3
    Hay @Izhaki .. is there some confusion? In the image you posted, what are you actually referring to? there seems to be no connection to the question - what am I missing?
    – Fattie
    Sep 28, 2015 at 20:13
  • 1
    The section titled "Your selections". It's breadbox in contrast to bread crumb.
    – plainclothes
    Sep 28, 2015 at 21:40
2

Before flat design became in vogue, during the heyday of gradients, drop-shadows and reflections, tags wrapped inside round cornered rectangles were often referred to as Lozenges in certain circles. This term was a way to distinguish between a button and a list of tags which are clickable. That said, I've not heard the term mentioned in the last couple of years.

Improve this answer
1
  • That horrible term came from Apple's silly little pill-shaped buttons, IIRC.
    – plainclothes
    Sep 29, 2015 at 16:49
1

Buttons? There's no specific term for it. The first example are tags. The second are filters. They just happen to be styled as buttons/boxes.

UPDATE: Joe makes me realize that what these are called would depend on what we're talking about.

  • Individual words or phrases to provide meta-data to content: tags
  • Terms used to reduce a search data set: filters
  • An 'x' to delete an item: delete?
  • A visual box you can interact with: button?

I'd say your images are examples of (functionally) tags and filters that can be easily dismissed with the delete icon and (stylistically) displayed as buttons :)

Improve this answer
2
  • 1
    These are called tags dude. (Or - sure - tag buttons, etc.) Maybe I'm misinterpreting this question. Maybe you've had too much Chardonnay today :)
    – Fattie
    Sep 28, 2015 at 20:16
  • @JoeBlow in the first example, the content is a tag. But not all tags have this visual style. The second could be called a tag, but it's being used in the context of a filter. It's all subjective of course and mostly dependent on context.
    – DA01
    Sep 28, 2015 at 21:27
1

I don't know if there's a particularly well established terminology for them, but I've generally heard them referred to as pills.

The naming confusion comes from the fact that the most common use for the pill UI pattern is to represent tags. It's easy to spot why folks would drift to using the common usage to describe the pattern. Pills work really well for tags, but they work really well for other things too - Emails, IP addresses, etc...

So, "pill" or "pill input" is the ui pattern that's often used to provide tagging capability, but which can be used for other things too.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.