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

`Window` is the root of the tree of elements that are visible on the screen.

The `Window` geometry will be restricted by its layout constraints: Setting the `width` will result in a fixed width,
and the window manager will respect the `min-width` and `max-width` so the window can't be resized bigger
or smaller. The initial width can be controlled with the `preferred-width` property. The same applies to the `Window`s height.

Use the <Link type="MenuBar" /> element to declare a menu bar for the window.

## Properties

### always-on-top
<SlintProperty propName="always-on-top" typeName="bool" defaultValue="false">
Whether the window should be placed above all other windows on window managers supporting it.
</SlintProperty>

### full-screen
<SlintProperty propName="full-screen" typeName="bool" defaultValue="true if 'SLINT_FULLSCREEN' environment variable is set, otherwise false ">
Whether to display the Window in full-screen mode. In full-screen mode the Window will occupy the entire screen, it will not be resizable, and it will not display the title bar.
</SlintProperty>

### background
<SlintProperty propName="background" typeName="brush" defaultValue="depends on the style">
The background brush of the `Window`.
</SlintProperty>

### default-font-family
<SlintProperty propName="default-font-family" typeName="string">
The font family to use as default in text elements inside this window, that don't have their `font-family` property set.
</SlintProperty>

### default-font-size
<SlintProperty propName="default-font-size" typeName="length" defaultValue="0" propertyVisibility="in">
The font size to use as default in text elements inside this window, that don't have their `font-size` property set. The value of this property also forms the basis for relative font sizes.
</SlintProperty>

### default-font-weight
<SlintProperty propName="default-font-weight" typeName="int"  >
The font weight to use as default in text elements inside this window, that don't have their `font-weight` property set. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
</SlintProperty>

### icon
<SlintProperty propName="icon" typeName="image">
The window icon shown in the title bar or the task bar on window managers supporting it.
</SlintProperty>

### no-frame
<SlintProperty propName="no-frame" typeName="bool" defaultValue="false">
Whether the window should be borderless/frameless or not.
</SlintProperty>

### resize-border-width
<SlintProperty propName="resize-border-width" typeName="length" defaultValue="0">
    :::caution[Caution]
    This property is `winit` only for now.
    :::
    Size of the resize border in borderless/frameless windows.
</SlintProperty>

### title
<SlintProperty propName="title" typeName="string">
The window title that is shown in the title bar.
</SlintProperty>

### safe-area-inset-top
<SlintProperty propName="safe-area-inset-top" typeName="length" propertyVisibility="out">
Some devices, such as mobile phones, allow programs to overlap the system UI. A few examples for this are the notch on iPhones, the window buttons on macOS on windows that extend their content over the titlebar and the system bar on Android. This property exposes the amount of space at the top of the window that can be drawn to but where no interactive elements should be placed. On most devices, this is 0.
</SlintProperty>

### safe-area-inset-bottom
<SlintProperty propName="safe-area-inset-bottom" typeName="length" propertyVisibility="out">
Some devices, such as mobile phones, allow programs to overlap the system UI. A few examples for this are the notch on iPhones, the window buttons on macOS on windows that extend their content over the titlebar and the system bar on Android. This property exposes the amount of space at the bottom of the window that can be drawn to but where no interactive elements should be placed. On most devices, this is 0.
</SlintProperty>

### safe-area-inset-left
<SlintProperty propName="safe-area-inset-left" typeName="length" propertyVisibility="out">
Some devices, such as mobile phones, allow programs to overlap the system UI. A few examples for this are the notch on iPhones, the window buttons on macOS on windows that extend their content over the titlebar and the system bar on Android. This property exposes the amount of space at the left of the window that can be drawn to but where no interactive elements should be placed. On most devices, this is 0.
</SlintProperty>

### safe-area-inset-right
<SlintProperty propName="safe-area-inset-right" typeName="length" propertyVisibility="out">
Some devices, such as mobile phones, allow programs to overlap the system UI. A few examples for this are the notch on iPhones, the window buttons on macOS on windows that extend their content over the titlebar and the system bar on Android. This property exposes the amount of space at the right of the window that can be drawn to but where no interactive elements should be placed. On most devices, this is 0.
</SlintProperty>

### virtual-keyboard-x
<SlintProperty propName="virtual-keyboard-x" typeName="length" propertyVisibility="out">
On mobile devices, virtual keyboards (aka software keyboards or onscreen keyboards) are displayed on top of the application. When such a keyboard is shown, this property denotes the horizontal position of the left boundary of the rectangle covered by it in window coordinates.
</SlintProperty>

### virtual-keyboard-y
<SlintProperty propName="virtual-keyboard-y" typeName="length" propertyVisibility="out">
On mobile devices, virtual keyboards (aka software keyboards or onscreen keyboards) are displayed on top of the application. When such a keyboard is shown, this property denotes the vertical position of the top boundary of the rectangle covered by it in window coordinates.
</SlintProperty>

### virtual-keyboard-width
<SlintProperty propName="virtual-keyboard-width" typeName="length" propertyVisibility="out">
On mobile devices, virtual keyboards (aka software keyboards or onscreen keyboards) are displayed on top of the application. When such a keyboard is shown, this property denotes the width of the rectangle covered by it in window coordinates or 0 otherwise.
</SlintProperty>

### virtual-keyboard-height
<SlintProperty propName="virtual-keyboard-height" typeName="length" propertyVisibility="out">
On mobile devices, virtual keyboards (aka software keyboards or onscreen keyboards) are displayed on top of the application. When such a keyboard is shown, this property denotes the height of the rectangle covered by it in window coordinates or 0 otherwise.
</SlintProperty>
