# CloseButton

`{% 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', …)`.



<br>

Source: Markdown

```aardvark
{% closebutton %}
```


Source: Python

```python
component('aardvark', 'closebutton')
```



## Size and radius

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

    

<br>

Source: Markdown

```aardvark
{% closebutton size='xs' %}
{% closebutton size='sm' %}
{% closebutton size='md' %}
{% closebutton size='lg' %}
{% closebutton size='xl' radius='xl' %}
```


Source: Python

```python
for s in ('xs', 'sm', 'md', 'lg'):
    component('aardvark', 'closebutton', size=s)
component('aardvark', 'closebutton', size='xl', radius='xl')
```



## Variant and color

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

   

<br>

Source: Markdown

```aardvark
{% closebutton variant='subtle' %}
{% closebutton variant='transparent' %}
{% closebutton color='red' %}
{% closebutton color='grape' %}
```


Source: Python

```python
component('aardvark', 'closebutton', variant='subtle')
component('aardvark', 'closebutton', variant='transparent')
component('aardvark', 'closebutton', color='red')
component('aardvark', 'closebutton', color='grape')
```



## Custom icon

By default the button is a ✕. Pass an `icon` — any
[`{% icon %}`](/components/data-display/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.

 

<br>

Source: Markdown

```aardvark
{% closebutton icon='trash' label='Remove' %}
{% closebutton icon='x' label='Dismiss' %}
```


Source: Python

```python
component('aardvark', 'closebutton', icon='trash', label='Remove')
component('aardvark', 'closebutton', icon='x', label='Dismiss')
```



## 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



<br>

Source: Markdown

```aardvark
{% closebutton disabled=true %}
```


Source: Python

```python
component('aardvark', 'closebutton', disabled=True)
```



## With other components

A close button belongs in the corner of a dismissible surface — here in the top-right of a
[callout](/components/feedback/callout/), laid out with a
`{% group %}`:







Heads up — you have unsaved changes.








<br>

Source: Markdown

```aardvark
{% callout severity='info' %}
{% group justify='space-between' %}
Heads up — you have unsaved changes.
{% closebutton label='Dismiss notice' %}
{% endGroup %}
{% endCallout %}
```


Source: Python

```python
component('aardvark', 'closebutton', label='Dismiss notice')
```



## 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 %}`](/components/data-display/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.


```css
[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.



<br>

Source: Markdown

```aardvark
{% closebutton attr={'onclick': '''
const value = this.tagName;
console.log('attr demo value:', value);
alert(value);
'''} %}
```


Source: Python

```python
component('aardvark', 'closebutton', attr={'onclick': '''
const value = this.tagName;
console.log('attr demo value:', value);
alert(value);
'''})
```