ActionIcon

The built-in actionicon tag — Mantine's icon-only button. Render any icon (Tabler, Font Awesome, image, emoji, or inline SVG) with the full ActionIcon surface: variant, color, size, radius, loading, disabled, gradient, plus link mode and onclick.

{% actionicon %} is a built-in tag for an icon-only button — a compact, square button whose whole content is a single icon. It renders a Mantine ActionIcon, so it carries that component’s full surface. The icon is read exactly like the {% icon %} tag, and an icon-only button needs a label for its accessible name.

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

Source: Markdown

Source: Python

The icon

The icon is any {% icon %} spec:

a Tabler name — a bare lowercase name like settings or brand-github;
a Font Awesome class — fa-solid fa-gear;
a path/URL to an image — /icons/logo.svg;
an emoji — 🔍.

Set filled to use the filled Tabler style for a bare Tabler name.

Source: Markdown

Source: Python

Accessible name

An icon-only button has no visible text, so screen readers can’t name it. Always pass a label — it becomes the button’s aria-label.

Source: Markdown

Source: Python

Variant

variant is one of filled, light (default), outline, subtle, transparent, white, default, or gradient.

Source: Markdown

Source: Python

Gradient

variant='gradient' takes gradientFrom, gradientTo, and gradientDeg (degrees).

Source: Markdown

Source: Python

Color, size, and radius

color takes any theme color or a CSS color. size accepts the Mantine tokens (xs–xl); radius accepts xs–xl or any CSS value. autoContrast auto-picks a glyph color that meets contrast against the button background.

Source: Markdown

Source: Python

Loading and disabled

loading shows a spinner (and blocks clicks); disabled renders the button disabled.

Source: Markdown

Source: Python

Link mode

Set url and the button renders as a link (<a href>): it navigates on click and works without JavaScript. target, rel, and download pass through, exactly as on {% button %}.

Source: Markdown

Source: Python

With other components

Icon-only buttons are the natural toolbar control — group several in a {% group %} next to a heading:

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default. Bare boolean flags (filled, loading, disabled, autoContrast) set the option to True; in Python pass =True.

Attribute	Valid values	Description
`icon`	Tabler name / Font Awesome class / image path / emoji / inline `<svg>`	The icon spec, read like `{% icon %}`.
`filled`	bool flag	Use the filled Tabler style for a bare Tabler name.
`label`	string	Accessible name (`aria-label`) — always set this.
`variant`	`filled`, `light` (default), `outline`, `subtle`, `transparent`, `white`, `default`, `gradient`	Visual style.
`color`	theme color name or CSS color	Button color.
`size`	`xs`–`xl`	Button size.
`radius`	`xs`–`xl` or any CSS value	Corner radius.
`loading`	bool flag	Show a spinner and block clicks.
`disabled`	bool flag	Render disabled.
`autoContrast`	bool flag	Auto-pick a glyph color that meets contrast.
`url`	relative path or `http(s)://` URL	Render as a link (`<a href>`). `javascript:`/`data:`/`vbscript:`/`file:`/`blob:` schemes are rejected at build time.
`target`	e.g. `_blank`	Where to open the link (link mode).
`rel`	e.g. `noopener noreferrer`	Link relationship (link mode).
`download`	filename string	Suggest a filename for the linked file (link mode).
`id`	string	HTML `id` on the rendered button (or `<a>`).
`onclick`	JS expression string	JavaScript run on click. In Python pass `attr={'onclick': '…'}`.
`gradientFrom`	color	Start color (`variant='gradient'`).
`gradientTo`	color	End color (`variant='gradient'`).
`gradientDeg`	number (degrees)	Angle (`variant='gradient'`).
`m`, `mt`, `mb`, `ml`, `mr`, `mx`, `my`	size token or CSS value	Margin (Mantine spacing system).
`p`, `pt`, `pb`, `pl`, `pr`, `px`, `py`	size token or CSS value	Padding (Mantine spacing system).

CSS Selectors

Each action icon mounts inside an island wrapper carrying data-aardvark-island="ActionIcon"; Mantine’s Styles API exposes the button root, the icon slot, and the loading overlay.

[data-aardvark-island="ActionIcon"]  /* the island wrapper */
.mantine-ActionIcon-root             /* the <button> */
.mantine-ActionIcon-icon             /* the icon slot */
.mantine-ActionIcon-loader           /* the loading spinner (loading=true) */

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — onto the rendered button. The onclick shortcut is the common case: set onclick to a JavaScript expression and it runs when the button is clicked. In Python, onclick rides this same channel — pass attr={'onclick': '…'}.

Source: Markdown

Source: Python

For any other attribute — data-*, ARIA, or a full multi-line handler — pass the attr={…} dict directly:

Source: Markdown

Source: Python

(See the {% button %} page’s note about onclick as a stored-XSS surface on multi-author sites, and the site-wide attrPolicy.)