# UnstyledButton

`{% unstyledbutton %}` is a **built-in** tag for a **button with no
styles** — Mantine's UnstyledButton. It renders a real, accessible `<button>`
(keyboard-focusable, correct semantics) with **none** of Mantine's button chrome, so you
can paint it however you like with the Mantine style props or your own CSS.

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

A plain, accessible button

<br>

Source: Markdown

```aardvark
{% unstyledbutton text='A plain, accessible button' %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', text='A plain, accessible button')
```



## Label

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

Inline label Block label

<br>

Source: Markdown

```aardvark
{% unstyledbutton text='Inline label' %}
{% unstyledbutton %}Block label{% endUnstyledbutton %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', text='Inline label')
component('aardvark', 'unstyledbutton', children='Block label')
```



## Style it yourself

The whole point is that you supply the look. The Mantine style props are forwarded —
padding (`p`, `px`, …), background (`bg`), text color (`c`), sizing (`w`, `h`), and the rest
— so you can build a custom button inline:

Custom Bordered

<br>

Source: Markdown

```aardvark
{% unstyledbutton text='Custom' bg='grape.6' c='white' px='md' py='xs' %}
{% unstyledbutton text='Bordered' c='grape' px='md' py='xs' %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', text='Custom', bg='grape.6', c='white', px='md', py='xs')
component('aardvark', 'unstyledbutton', text='Bordered', c='grape', px='md', py='xs')
```



For anything more involved, reach for a [snippet](/authoring/custom-components/) or a CSS
class via `id`.

## Link mode

Set `url` and it renders as a link (`<a href>`) instead of a `<button>`: it navigates on
click and works without JavaScript. `target`, `rel`, and `download` pass through.

Go to components

<br>

Source: Markdown

```aardvark
{% unstyledbutton text='Go to components' url='/components/' c='grape' %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', text='Go to components', url='/components/', c='grape')
```



## With other components

Because it carries no chrome of its own, an unstyled button is the right base for a fully
custom clickable surface — here a whole row in a [card](/components/data-display/card/),
styled inline:



View all 24 events →



<br>

Source: Markdown

```aardvark
{% card title='Recent activity' %}
{% unstyledbutton url='/components/' c='grape' p='xs' w='100%' %}View all 24 events →{% endUnstyledbutton %}
{% endCard %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', children='View all 24 events →',
          url='/components/', c='grape', p='xs', w='100%')
```



## Attributes

Omit any attribute to take its default.

| Attribute | Valid values | Description |
| --- | --- | --- |
| `text` | string | Label, when not using the block body. |
| `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': '…'}`. |
| `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). |
| `bg`, `c` | color | Background, text color. |
| `w`, `h`, `miw`, `mih`, `maw`, `mah` | size token or CSS value | Width / height / min / max. |

## CSS Selectors

Each button mounts inside an island wrapper carrying `data-aardvark-island="UnstyledButton"`; Mantine's Styles API exposes the (chrome-free) root element.


```css
[data-aardvark-island="UnstyledButton"]  /* the island wrapper */
.mantine-UnstyledButton-root             /* the rendered <button> / <a> */
```


## 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 on click. In Python, `onclick` rides this same channel — pass `attr={'onclick': '…'}`.

Click me

<br>

Source: Markdown

```aardvark
{% unstyledbutton text='Click me' onclick="(() => alert('Hi!'))()" c='grape' %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', text='Click me', c='grape',
          attr={'onclick': "(() => alert('Hi!'))()"})
```



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

A plain, accessible button

<br>

Source: Markdown

```aardvark
{% unstyledbutton text='A plain, accessible button' attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''} %}
```


Source: Python

```python
component('aardvark', 'unstyledbutton', text='A plain, accessible button', attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''})
```



(See the [`{% button %}`](/components/buttons/button/) page's note about
`onclick` as a stored-XSS surface on multi-author sites, and the site-wide `attrPolicy`.)