# Button
`{% 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', …)`.
Get started
Source: Markdown
```aardvark
{% button text='Get started' url='#' %}
```
Source: Python
```python
component('aardvark', 'button', text='Get started', url='#')
```
## 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`.
Inline label Block label
Source: Markdown
```aardvark
{% button text='Inline label' %}
{% button %}Block label{% endButton %}
```
Source: Python
```python
component('aardvark', 'button', text='Inline label')
component('aardvark', 'button', children='Block label')
```
## Linking
Set `url` and the button renders as a link (``): 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.
Browse components Plain button
Source: Markdown
```aardvark
{% button text='Browse components' url='/components/' %}
{% button text='Plain button' %}
```
Source: Python
```python
component('aardvark', 'button', text='Browse components', url='/components/')
component('aardvark', 'button', text='Plain button')
```
### 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.
Mantine docs Download report
Source: Markdown
```aardvark
{% button text='Mantine docs' url='https://mantine.dev' target='_blank' rel='noopener noreferrer' %}
{% button text='Download report' url='/report.pdf' download='report.pdf' variant='outline' %}
```
Source: Python
```python
component('aardvark', 'button', text='Mantine docs', url='https://mantine.dev',
target='_blank', rel='noopener noreferrer')
component('aardvark', 'button', text='Download report', url='/report.pdf',
download='report.pdf', variant='outline')
```
## Variant
`variant` is one of `filled` (default), `outline`, `light`, `subtle`, `default`,
`transparent`, `white`, or `gradient`.
filled outline light subtle default
Source: Markdown
```aardvark
{% button text='filled' variant='filled' %}
{% button text='outline' variant='outline' %}
{% button text='light' variant='light' %}
{% button text='subtle' variant='subtle' %}
{% button text='default' variant='default' %}
```
Source: Python
```python
for v in ('filled', 'outline', 'light', 'subtle', 'default'):
component('aardvark', 'button', text=v, variant=v)
```
### 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.
Sunset Indigo → cyan
Source: Markdown
```aardvark
{% button text='Sunset' variant='gradient' gradientFrom='orange' gradientTo='red' gradientDeg=45 %}
{% button text='Indigo → cyan' variant='gradient' gradientFrom='indigo' gradientTo='cyan' gradientDeg=90 %}
```
Source: Python
```python
component('aardvark', 'button', text='Sunset', variant='gradient',
gradientFrom='orange', gradientTo='red', gradientDeg=45)
component('aardvark', 'button', text='Indigo → cyan', variant='gradient',
gradientFrom='indigo', gradientTo='cyan', gradientDeg=90)
```
## 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.
grape teal custom hex
Source: Markdown
```aardvark
{% button text='grape' color='grape' %}
{% button text='teal' variant='outline' color='teal' %}
{% button text='custom hex' color='#e8590c' %}
```
Source: Python
```python
component('aardvark', 'button', text='grape', color='grape')
component('aardvark', 'button', text='teal', variant='outline', color='teal')
component('aardvark', 'button', text='custom hex', color='#e8590c')
```
`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.
autoContrast no autoContrast
Source: Markdown
```aardvark
{% button text='autoContrast' color='yellow' autoContrast %}
{% button text='no autoContrast' color='yellow' %}
```
Source: Python
```python
component('aardvark', 'button', text='autoContrast', color='yellow', autoContrast=True)
component('aardvark', 'button', text='no autoContrast', color='yellow')
```
## 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.
compact-md md (default) lg + xl radius
Source: Markdown
```aardvark
{% button text='compact-md' size='compact-md' %}
{% button text='md (default)' %}
{% button text='lg + xl radius' size='lg' radius='xl' %}
```
Source: Python
```python
component('aardvark', 'button', text='compact-md', size='compact-md')
component('aardvark', 'button', text='md (default)')
component('aardvark', 'button', text='lg + xl radius', size='lg', radius='xl')
```
## 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.
Continue New
Source: Markdown
```aardvark
{% button text='Continue' rightSection='→' %}
{% button text='New' leftSection='★' variant='outline' %}
```
Source: Python
```python
component('aardvark', 'button', text='Continue', rightSection='→')
component('aardvark', 'button', text='New', leftSection='★', variant='outline')
```
When `fullWidth` is on, `justify` controls how the sections and label distribute
horizontally (any CSS `justify-content` value):
Settings
Source: Markdown
```aardvark
{% button text='Settings' leftSection='⚙' rightSection='›' fullWidth justify='space-between' %}
```
Source: Python
```python
component('aardvark', 'button', text='Settings', leftSection='⚙', rightSection='›',
fullWidth=True, justify='space-between')
```
## Form buttons
Inside a `