Pills

Usage

Pills displays a row (or column) of tag-style labels — useful for categories, filters, skills, status tags, or any compact list of short text items. Each Pill child can be plain text or a link, with its own color and optional indicator dot.

Parent Pills controls layout and shared styling for every pill in the group. Select an individual Pill to edit its label, URL, color, and indicator.

Parent and child blocks

The Pills parent holds one or more Pill children (ds/pill). Add pills with the block inserter or duplicate an existing pill.

Select Pills for layout and group-wide pill styling. Select a Pill child for text, link, color, and indicator settings.

Layout (parent)

• Justify — Start, Center, End, or Space Between
• Orientation — Horizontal (default) or Vertical
• Gap — spacing between pills in rem steps (0–12)

Pill style (parent)

These settings apply to every pill in the group via shared CSS variables:

• Quick-Set Color — applies a color preset to every existing pill in the group (Primary, Secondary, Accent, Variant, Gray, White, Black, or Transparent). Individual pills can still be changed afterward. Newly added pills start as Primary until you quick-set again or edit that pill.
• Padding X / Padding Y — internal spacing in em
• Font Size — text size in em (0.5–2)
• Border Radius — Square, Rounded, or Full (pill-shaped, default)
• Border Width — outline thickness in pixels (0–4)
• Font Weight — 100–900 in steps of 100
• Text Transform — Normal, Uppercase, Title Case, or Lowercase

Individual pills (child)

Select a Pill to configure:

• Text — edit inline in the editor; bold (<strong>) is allowed from the formatting toolbar. Ampersands in labels are stored as & (WordPress JSON escapes are repaired on open).
• URL — optional link (sidebar URL field or Link toolbar button). Without a URL the pill renders as a <div>; with a URL it becomes an <a>.
• Color — Primary, Secondary, Accent, Variant, Gray, White, Black, or Transparent (transparent fill with a gray outline; set parent Border Width to 0 for no outline)
• Show Indicator — animated dot before the label, useful for live/active status

Block width

Pills supports Wide and Full alignment from the block toolbar.

Tips

• Use Space Between justify for filter bars that span the full width of a container.
• Show Indicator with a pulse animation works well for "Live" or "New" status tags.
• Set Orientation to Vertical for sidebar tag lists or stacked filters on mobile-first layouts.
• Parent padding and typography controls keep a long pill list visually consistent — use Quick-Set Color to match every pill, then override individual pills when items need different emphasis.