Pills (tags)

We make use of many taxonomies on our website, such as software categories and workshop filters. When we display taxonomy labels for users and want them to have a tag-like look, we apply pill styling.

Label/category

When to use: Shows the label/filter/category, but it's not clickable.

How it looks: Dark gray outline/text, white background.

See it in action: would appear on workshops items as labels.

Sample Classes
Label

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

Clickable filter/category

When to use: Click to see all items with that filter/category.

How it looks/works: Does not have an X. Red outline/text, white background.

See it in action explore software

Sample Classes

<button class="pill">Regular pill</button>

(Hover or focus)

<button class="pill active">Active regular pill</button>

Dismissable filter/category

When to use: When the filter/category is already selected. Click this pill to dismiss the filter/category.

How it looks/works: Has an X. Red outline/text, white background.

See it in action: Explore Spaces when removing filters.

Sample Classes

<button class="pill dismiss">Dismissable button</button>
Updated

We're glad! Thanks for the feedback.

Website feedback

What is the issue with this page?

We hear you! Thanks for letting us know.