Pill

The Pill component is a great way to visually represent the status, category, or type of an item with a small, color-coded label. Pills are typically used to draw attention to key information in a clear and concise manner. You can easily integrate them into your custom data, such as within list items, to show dynamic status updates.

Basic pill example

A pill can be created using a <span> element with the class pill. By default, it appears as a simple rounded label. Here’s a basic example:

<span class="pill">Label</span>

This will render a pill with the text "Label". To make pills more useful, you’ll likely want to add colors and other dynamic properties.

Dynamic pill for status

Using Liquid's if statement, you can create dynamic pills that reflect the current status or condition of an item. Here’s an example that shows how you can display different pill colors based on the active status of a domain:

<span class="pill {% if item.active == true %}pill--green{% else %}pill--red{% endif %}">{{ item.domain }}</span>

In this example:

• The pill will be green if item.active is true

• The pill will be red if item.active is false

The pill class changes dynamically based on the value of item.active, allowing for a visual representation of the domain’s status. You can extend this logic to handle other types of statuses as well.

Custom pill colors

Fernand also supports additional pill color options to represent different states. You can use the following color classes to customize your pills:

• pill--green for success or active status

• pill--orange for warning or pending status

• pill--red for error or inactive status

Here’s an example of using various colored pills:

<span class="pill">Inactive</span>
<span class="pill pill--green">Active</span>
<span class="pill pill--orange">Warning</span>
<span class="pill pill--red">Error</span>

Combining pills with other components

Pills can be combined with other components, such as lists, tables, or cards, to add more clarity and context. Here’s an example of pills being used inside a table to display priority levels:

<table>
  <thead>
    <tr>
      <th>Ticket</th>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ticket #123</td>
      <td><span class="pill pill--red">High</span></td>
    </tr>
    <tr>
      <td>Ticket #124</td>
      <td><span class="pill pill--green">Low</span></td>
    </tr>
  </tbody>
</table>

By combining pills with other elements, you can enhance the UI of your support tickets, dashboards, or customer profiles, giving users clear, color-coded context at a glance.