Pill Group shows a row of rounded pills, each with optional text, an icon, a count badge and a link. Mark one as active for a category filter. Long rows can wrap onto new lines or scroll sideways, chosen per breakpoint.
A blog category filter with counts, recipe tags with icons, and a long row of areas. Hover a linked pill to see its hover colours.
Each pill links to a category and shows a post count. All posts is marked active.
Plain tags with icons in the brand colour, square corners and a count on the rating pill.
Nineteen pills, centred and wrapping onto new lines on larger screens. On a phone the row stays on one line and you swipe it sideways.
Add pills in a repeater and choose how the row behaves.
Drop Pill Group onto the page, for example above a post grid or under a product title.
Give each pill text and, if you like, an icon, a count and a link. Switch on Active for the current one.
Pick Wrap onto new lines or Scroll sideways for each breakpoint, then set the colours and spacing.
One repeater covers filters, tags and quick links.
Mark the current pill as active. It gets its own colours and aria-current, so screen readers know which one is selected.
Add a count to any pill, such as the number of posts or products. It has its own colours inside active pills.
Add an icon before the text, with its own size, colour and gap.
Pills with a link become links with hover and focus styles. Pills without one are plain tags.
Choose per breakpoint whether a long row wraps onto new lines or scrolls sideways on one line.
Align the row to the start, centre or end. Responsive, so it can change on phones.
Set hover background, text and border colours, and a focus outline colour for keyboard users.
Set the gap, vertical and horizontal padding, radius, border width and typography.
Pills are output as a list, and text, counts and links accept dynamic data.
Anywhere a short set of labels helps people find or understand something.
Link to each category archive and mark the current one as active.
Point to popular collections with product counts.
Show dietary labels, cooking time or features as small tags with icons.
Let visitors jump to a town or area in a long list that scrolls on phones.
Music, comedy, theatre and family events, each with a count.
List skills on a profile or topics covered on a course page.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Pills | Repeater. Each pill has Text, Count Badge, Link, Icon and Active. | 6 sample pills |
| Layout | ||
| Overflow | Wrap onto new lines or Scroll sideways. Responsive. | Wrap, scroll on phone portrait |
| Alignment | Start, Center or End. Responsive. | Start |
| Gap | Space between pills. Responsive. | 8px |
| Pill | ||
| Typography | Text style of the pills. | 0.875em |
| Padding (Vertical / Horizontal) | Space inside each pill. Responsive. | 6px / 14px |
| Radius, Border Width | Corner radius and border width. | 999px, 1px |
| Background, Text Color, Border Color | Colours of inactive pills. | Global colours |
| Hover Background, Hover Text Color, Hover Border Color | Colours when a linked pill is hovered. | Brand tint |
| Focus Outline Color | Outline shown when a pill has keyboard focus. | Brand colour |
| Active Pill | ||
| Background, Text Color, Border Color | Colours of the active pill. | Brand colour |
| Count Badge | ||
| Typography, Padding | Text style and padding of the count. | — |
| Background, Text Color | Count colours on inactive pills. | — |
| Active Pill Background, Active Pill Text Color | Count colours inside the active pill. | — |
| Icon | ||
| Size | Icon size. Responsive. | 1em |
| Gap To Text | Space between the icon, text and count. Responsive. | 6px |
| Color | Icon colour. | Text colour |
No. Each pill is a link, so point it at a category archive or a filtered URL. Switch on Active for the pill that matches the current page.
With Overflow set to Scroll sideways, the pills stay on one line and the row scrolls horizontally with a swipe. The scrollbar is hidden. The default is wrap on larger screens and scroll on phone portrait.
Yes. Leave the link empty and the pill is output as a plain tag, with no hover effect.
The pills are a list, the active pill has aria-current, icons are hidden from screen readers and linked pills show a focus outline.
Yes. A pill with an icon and no text still shows. It is output as a plain tag, since a link needs text.
Pill Group is included with Phox Elements, along with 140+ other premium elements for Breakdance.