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

<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-standardbutton.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets standardbutton example'>
```slint playground
import { StandardButton, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
  VerticalBox {
    StandardButton { kind: ok; }
    StandardButton { kind: apply; }
    StandardButton { kind: cancel; }
  }
}
```
</CodeSnippetMD>

The StandardButton looks like a button, but instead of customizing with `text` and `icon`,
it can used one of the pre-defined `kind` and the text and icon will depend on the style.

## Properties

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

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

### kind
<SlintProperty typeName="enum" propName="kind" defaultValue="ok" enumName="StandardButtonKind" >
The kind of button, one of `ok` `cancel`, `apply`, `close`, `reset`, `help`, `yes`, `no,` `abort`, `retry` or `ignore`

```slint "kind: ok;"
StandardButton {
    kind: ok;
}
```
</SlintProperty>

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

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

## Callbacks

### clicked()

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

```slint {2-4}
StandardButton {
    clicked() => {
        debug("Button clicked");
    }
}
```