Pill

The built-in pill tag — a small rounded chip, the token MultiSelect and TagsInput render for each value. Usage, options, and live examples.

A built-in tag for a small rounded pill — the chip that MultiSelect and TagsInput render for each value. Use it on its own wherever you want a compact token. The label is the block body or a text param.

Use it as {% pill %}…{% endPill %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'pill', …).

Basic pills

The label is the block body, or the text param for a self-closing tag:

Variant, remove button, disabled

variant is default or contrast. withRemoveButton shows an × (visual only here — the real remove behavior lives inside MultiSelect and TagsInput). disabled dims the pill:

Sizes and radius

size and radius both run xs–xl:

Building a row of pills in Python

Because the tag is also a Python callable, a bare {% … %} template block can loop and emit a row of pills — handy when the labels come from data rather than being typed out:

Attributes

Every attribute is optional; omit one to take its Mantine default. The label comes from the block body, or from text when self-closing.

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="Pill"] — or through the Mantine Styles API classes (.mantine-Pill-root and its inner parts):

/* Every rendered Pill carries this island marker */
[data-aardvark-island="Pill"] { }

/* Mantine Styles API class on the root element */
.mantine-Pill-root { }
.mantine-Pill-label { }
.mantine-Pill-remove { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: