Button

The built-in button tag — a styled button or link with the full Mantine Button surface: variant, color, size, gradient, sections, link target/rel/download, spacing, id selectors. Usage, options, and live examples.

{% button %} is a built-in tag for buttons and button-styled links — every Mantine Button capability, exposed as a single tag with no setup. The header’s top-bar call-to-action buttons (topButtons in aardvark.config.yaml) use the same tag.

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

Label

Give the label inline with text, or as the block body (handy when the label wraps other markup). In Python, pass the body as children.

Linking

Set url and the button renders as a link (<a href>): it navigates on click and works even without JavaScript. A scoped style keeps the link looking like a button rather than inheriting the theme’s prose-link color and underline.

Open in a new tab / download a file

When url is set, link-only attributes pass through: target, rel, download. Pair target='_blank' with rel='noopener noreferrer' for security.

Variant

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

Gradient

variant='gradient' takes gradientFrom, gradientTo, and gradientDeg (a number, in degrees). They compose into a single Mantine gradient. Supply all three together — if you omit any, Mantine fills in its default for the missing field, usually not what you intended.

Color

color takes any theme color (a brand color from your theme’s theme.scss, like primary or secondary) or a CSS color. It defaults to the theme’s primary.

autoContrast picks a label color (white or black) that meets contrast against the button’s background — useful with filled on light or non-Mantine colors.

Size, radius, and full-width

size accepts the Mantine size tokens (xs–xl) plus the compact variants (compact-xs–compact-xl). radius accepts xs–xl or any CSS value. fullWidth stretches the button to its container’s width.

Sections

leftSection and rightSection render content beside the label — a small string is the simplest case (emoji, arrow, short text). The Button’s flex layout gives them the right spacing automatically.

When fullWidth is on, justify controls how the sections and label distribute horizontally (any CSS justify-content value):

Form buttons

Inside a <form>, type='submit' makes the button submit the form (the HTML default; type='reset' and type='button' are also accepted).

Disabled

Selectors (id)

Set id to give CSS and JS something to target. It lands on the rendered button (or <a> in link mode), so #cta works in stylesheets and document.getElementById('cta') in scripts.

Spacing & sizing

The Button accepts Mantine’s spacing system — margin (m, mt, mb, ml, mr, mx, my) and padding (p, pt, pb, pl, pr, px, py) with the same size tokens as everywhere else (xs, sm, md, lg, xl) or any CSS value. bg/c shortcut background and text color, and w/h/miw/mih/maw/mah size the button.

With other components

A button sits naturally inside other primitives — here in a card, with a {% group %} to lay a pair side by side:

In the header

The site’s top-bar call-to-action buttons are the same tag. Configure them with topButtons in aardvark.config.yaml — each entry accepts every field below. The default is a Login (outline) + Sign up (grape→pink gradient at 135°) pair; set topButtons: [] to hide them.

Attributes

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

Label

Link mode (url set → <a href>)

State & behavior

Sections

Gradient variant (variant='gradient')

Spacing, color, and sizing (Mantine style system)

CSS Selectors

Each button mounts inside an island wrapper carrying data-aardvark-island="Button"; Mantine’s Styles API breaks the rendered element into the root, the inner content row, the label, and any icon section.

[data-aardvark-island="Button"]  /* the island wrapper */
.mantine-Button-root             /* the <button> / <a> */
.mantine-Button-inner            /* the content row */
.mantine-Button-label            /* the text label */
.mantine-Button-section          /* a left/right icon slot */

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 — including an inline anonymous function called on the spot. In Python, onclick rides this same channel — pass attr={'onclick': '…'}. The value is any JS that’s valid in an onclick attribute — a single expression, a comma-chained sequence, or an IIFE for multi-statement logic.

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