Pill

<ef-pill>Default</ef-pill>
<ef-pill toggles>Toggles</ef-pill>
<ef-pill clears>Clear</ef-pill>

ef-pill is a small button style component which is used to show one or multiple selected items. It is nearly always used to visualize multiple item selections inside UI components.

Basic usage

You can display a pill with text inside.

<ef-pill>Banana</ef-pill>
<ef-pill>Raspberry</ef-pill>
<ef-pill>Mango</ef-pill>

<ef-pill>Banana</ef-pill>
<ef-pill>Raspberry</ef-pill>
<ef-pill>Mango</ef-pill>

Toggle pills

Toggle pills are used to switch between two states. To create a toggle pill, add the toggles attribute.

<ef-pill toggles>Toggles</ef-pill>
<ef-pill toggles active>Active Toggles</ef-pill>

<ef-pill toggles>Toggles</ef-pill>
<ef-pill toggles active>Active Toggles</ef-pill>

Pill with clear button

A pill can display a clear button, or a small cross icon, when the clears attribute is added. You can also add an event listener for when the clear button is clicked.

<ef-pill>Default</ef-pill>
<ef-pill clears>Clears Pill</ef-pill>

<ef-pill>Default</ef-pill>
<ef-pill clears>Clears Pill</ef-pill>

Events

To get a notification when the toggle pill state changes, you can add the click event listener to the pill and check the state from the active property.

<div class="container">
  <ef-pill id="Banana">Banana</ef-pill>
  <ef-pill id="Raspberry">Raspberry</ef-pill>
  <ef-pill id="Mango">Mango</ef-pill>
  <span id="text"></span>
</div>

var elementsArray = document.querySelectorAll('ef-pill');
for (var i = 0; i < elementsArray.length; i++) {
  elementsArray[i].addEventListener('click', function(e) {
    document.getElementById('text').textContent = e.target.id + ' is clicked!';
  });
};

.container {
  display: inline-flex;
  align-items: center;
}

#text {
  padding-left: 20px;
}

<ef-pill id="Banana">Banana</ef-pill>
<ef-pill id="Raspberry">Raspberry</ef-pill>
<ef-pill id="Mango">Mango</ef-pill>

var elementsArray = document.querySelectorAll('ef-pill');
for (var i=0; i < elementsArray.length; i++) {
  elementsArray[i].addEventListener('click', function (e) {
    document.getElementById('text').textContent = e.target.id + ' is clicked!';
  });
};