CloseButton

The built-in closebutton tag — Mantine's ✕ dismiss button. Size, radius, variant, color, disabled, and an optional custom icon to replace the default ✕.

{% closebutton %} is a built-in tag for a dismiss button — the small ✕ you put on dialogs, alerts, chips, and panels. It renders a Mantine CloseButton, which ships the ✕ glyph and an accessible default name (“Close button”) for free.

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

Source: Markdown

Source: Python

Size and radius

size accepts xs–xl; radius accepts xs–xl or any CSS value.

Source: Markdown

Source: Python

Variant and color

variant is subtle (default) or transparent; color takes any theme or CSS color.

Source: Markdown

Source: Python

Custom icon

By default the button is a ✕. Pass an icon — any {% icon %} spec — to replace it (e.g. a trash can for a delete action). When the glyph changes meaning, set a label so screen readers name it correctly. Add filled for the filled Tabler style of a bare Tabler name.

Source: Markdown

Source: Python

Accessible name

Mantine names the button “Close button” by default. Pass a label to override it when the button does something more specific (the example above names it “Remove”).

Disabled

Source: Markdown

Source: Python

With other components

A close button belongs in the corner of a dismissible surface — here in the top-right of a callout, laid out with a {% group %}:

Heads up — you have unsaved changes.

Source: Markdown

Source: Python

Attributes

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

Attribute	Valid values	Description
`icon`	Tabler name / Font Awesome class / image path / emoji / inline `<svg>`	An icon spec to replace the default ✕. Read like `{% icon %}`.
`filled`	bool flag	Use the filled Tabler style for a bare Tabler name.
`label`	string	Accessible name (`aria-label`). Defaults to “Close button”.
`variant`	`subtle` (default), `transparent`	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.
`disabled`	bool flag	Render disabled.
`id`	string	HTML `id` on the rendered button.
`onclick`	JS expression string	JavaScript run on click. In Python pass `attr={'onclick': '…'}`.
`m`, `mt`, `mb`, `ml`, `mr`, `mx`, `my`	size token or CSS value	Margin (Mantine spacing system).

CSS Selectors

Each close button mounts inside an island wrapper carrying data-aardvark-island="CloseButton"; Mantine’s Styles API exposes the button root.

[data-aardvark-island="CloseButton"]  /* the island wrapper */
.mantine-CloseButton-root             /* the × <button> */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered button — the same channel the onclick shortcut rides.

Source: Markdown

Source: Python