Lightning Web Components – Why Do SLDS Pills Always Have a Remove Button?

lightning-pilllightning-pill-containerlightning-web-componentsslds

In both the SLDS documentation and the lightning-pill and lightning-pill-container documentation, all pills have the "X" displayed that allows the pill to be removed:

pill example image

For the components, it is possible to leave out the onremove or onitemremove handlers so the button does nothing.

I have a case where I don't want the pills to be removable from the container (essentially "not editable") so would like to remove the "X" button but don't think that is easily possible. That leads to these two questions:

  1. Why the design decision that the "X" should always be there? Anyone know?
  2. If you don't want the "X" to make any change, do you ignore clicks or just display a message something like "Ha ha fooled you you can't actually remove this"?

Best Answer

For now, there's no context in Salesforce where pills appear in a non-editable context, so there's no SLDS design that includes pills without a dismissal button.

If you want your own pills without the button, you could build your own pill/pill-container component--it'd be pretty easy to hack--but be aware that you're doing something that isn't standard Salesforce UI, if you care about that "Salesforce Look." For a non-editable use case, maybe you'd want to have a combobox, datatable, or something else.

If you really want to have it not removable, maybe you could use the has-error attribute to draw attention to the fact that it can't be removed, or something along those lines, or perhaps a professional-looking toast.