FileButton

The built-in filebutton tag — a button that opens the native file picker. Constrain file types with accept, allow several with multiple. A client-side demo (it does not upload).

{% filebutton %} is a built-in tag for a file-picker button. Clicking it opens the browser’s native file dialog; the chosen file name appears beside the button.

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

Source: Markdown

Source: Python

Demo only — no upload

This tag is a client-side demo: it opens the picker and shows the selected file name, but it does not upload anywhere — wiring a file to a server needs JavaScript you write. Like CopyButton, Mantine’s FileButton is a render-prop component (its child is a (props) => … function), which a build-time Markdown tag can’t author, so this tag supplies the picker-and-name UI for you. For real uploads, write a snippet — a small React component where you hold the render-prop and can send the chosen file wherever you like.

Limit file types

accept is a standard HTML accept string — MIME types or extensions, comma-separated.

Source: Markdown

Source: Python

Multiple files

Set multiple to let the picker select several files at once.

Source: Markdown

Source: Python

Appearance

variant, color, size, and radius style the button.

Source: Markdown

Source: Python

With other components

Pair the picker with a hint in a card to frame what’s expected:

Attach your avatar

PNG or JPEG, up to 2 MB.

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its default. The bare boolean flag multiple sets the option to True; in Python pass =True.

Attribute	Valid values	Description
`label`	string	Button text.
`accept`	HTML accept string (MIME types / extensions, comma-separated)	Limit the picker to certain file types.
`multiple`	bool flag	Allow selecting several files.
`variant`	`filled`, `light`, `outline`, `subtle`, `default`, `transparent`, `white`	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.

For a custom trigger or to actually handle the chosen file, write a snippet — inside your own React component you get Mantine’s FileButton render-prop in full.

CSS Selectors

The picker mounts inside an island wrapper carrying data-aardvark-island="FileButton"; it renders a Mantine Button next to the chosen file name, laid out in a Mantine Group.

[data-aardvark-island="FileButton"]  /* the island wrapper */
.mantine-Group-root                  /* the button + filename row */
.mantine-Button-root                 /* the picker <button> */
.mantine-Button-label                /* the button text */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered button.

Source: Markdown

Source: Python