---
title: "Button"
description: "Button api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';

```slint playground
import { Button, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    VerticalBox {
        label := Text {
            text: "Button not clicked";
        }
        Button {
            text: "Click Me";
            clicked => {
                label.text = " Button clicked";
            }
        }
    }
}
```

A simple button. Common types of buttons can also be created with [StandardButton](/master/docs/slint/reference/std-widgets/basic-widgets/standardbutton.md).




## Properties

### checkable
<SlintProperty propName="checkable" typeName="bool" defaultValue="false">
Shows whether the button can be checked or not. This enables the `checked` property to possibly become true.

```slint "checkable: true;"
Button {
    text: "Checkable Button";
    checkable: true;
}
```
</SlintProperty>

### checked
<SlintProperty propName="checked" typeName="bool" defaultValue="false" propertyVisibility="in-out">
Shows whether the button is checked or not. Needs `checkable` to be true to work.
</SlintProperty>

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
Defaults to true. When false, the button cannot be pressed.
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool" propertyVisibility="out">
Set to true when the button has keyboard focus
</SlintProperty>

### icon
<SlintProperty propName="icon" typeName="image">
The image to show in the button. Note that not all styles support drawing icons.
</SlintProperty>

### icon-size
<SlintProperty propName="icon-size" typeName="length">
The size of the icon shown in the button. The default value depends on the style. The button will grow if needed to accommodate for large icon sizes.
</SlintProperty>

### pressed
<SlintProperty propName="pressed" typeName="bool" propertyVisibility="out">
Set to true when the button is pressed.
</SlintProperty>

### text
<SlintProperty propName="text" typeName="string">
The text written in the button.

```slint 'text: "Button with text";'
Button {
    text: "Button with text";
}
```
</SlintProperty>

### primary
<SlintProperty propName="primary" typeName="bool" defaultValue="false">
If set to true the button is displayed with the primary accent color.
</SlintProperty>

### colorize-icon
<SlintProperty propName="colorize-icon" typeName="bool" defaultValue="false">
If set to true, the icon will be colorized to the same color as the Button's text color.
</SlintProperty>

## Callbacks

### clicked()

Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

```slint {3-5}
Button {
    text: "Click me";
    clicked() => {
        debug("Button clicked");
    }
}
```