ColorSwatch

The built-in colorswatch tag — a square swatch that displays a single color. Usage, options, and live examples (size, radius, shadow, content).

A square swatch that displays one color — handy in palettes, legends, and design docs. The color attribute takes any CSS color value: a hex, an rgb()/rgba(), or a named color. An optional block body renders inside the swatch.

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

Demonstrations

Color values

color accepts hex, rgba(), and named colors:

Size, radius, and shadow

size sets the width and height (any CSS value; numbers are rem). radius squares off the corners. withShadow is on by default — pass withShadow=false to drop the inner shadow.

Content inside the swatch

An optional block body renders inside the swatch — for example, a check to mark the selected color:

With other components

Swatches line up well inside a {% group %} as a legend or palette:

Attributes

Omit any attribute to take its default.

CSS Selectors

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

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

/* Mantine Styles API class on the root element */
.mantine-ColorSwatch-root { }
.mantine-ColorSwatch-colorOverlay { }
.mantine-ColorSwatch-shadowOverlay { }

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: