---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Components, Properties, and Functions
description: Components, Properties, and Functions
---

import CodeSnippetMD from '/src/components/CodeSnippetMD.astro'; 

The Slint language is designed around components that vary in complexity. The simplest can be a label
which could be nothing more than a text element with a predefined font and point size. The most complex 
being a view or even the entire app. But regardless of the complexity they always can be broken down
into smaller components. 

To understand this lets start from the opposite perspective. You build an app in a single file as one
very complex component. It will require a lot of time to manage and edit that file. It's state will 
be hard to understand and reason about. It will easily have parts that depend on each other so changing
one part might cause unexpected behavior in another. Building an application this way doesn't work.

## Slint Components

Instead an app can be broken down into smaller components. Each one that has its own state and behavior.
They can be independent of each other and not necessarily depend on any other part of the app. In many
cases more complex components can be simply built by just composing multiple components together.

It then becomes easier to reason about the state and behavior of the app. While a single complex app
can seem smart the reality is it doesn't scale. While apps built from many dumb - or less smart - 
components can be used to build seemingly complex apps. But the reality is simple components leading
to complex behaviors or interfaces. One's that are easier to iterate on and reason about.

## Quick Example

The following example shows how to build a simple button.

<CodeSnippetMD imagePath="/src/assets/generated/guide-comp1.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
```slint no-test
component MyButton {  
}
```
</CodeSnippetMD>

This component has a name, but nothing more. However it automaticaly gains some common properties.

<CodeSnippetMD imagePath="/src/assets/generated/guide-comp2.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
```slint no-test
component MyButton {
    width: 200px;
    height: 50px;
}
```
</CodeSnippetMD>

This allows a default width and height to be set. It still won't show anything though.

<CodeSnippetMD imagePath="/src/assets/generated/guide-comp3.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
```slint no-test
component MyButton {
    width: 200px;
    height: 50px;
    Rectangle {
        background: lightseagreen;
    }
}
```
</CodeSnippetMD>


<CodeSnippetMD imagePath="/src/assets/generated/guide-comp4.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
```slint no-test
component MyButton {
    width: 200px;
    height: 50px;
    Rectangle {
        border-width: 2px;
        border-color: black;
        background: lightseagreen;
    }
    Text {
        text: "Hello World";
        color: white;
    }
}
```
</CodeSnippetMD>

A button needs a border so this gives it a black border. It also adds some text.


<CodeSnippetMD imagePath="/src/assets/generated/guide-comp5.png"  imageWidth="200" imageHeight="200"  imageAlt='image example'>
```slint no-test
component MyButton {
    width: 200px;
    height: 50px;
    Rectangle {
        border-width: 2px;
        border-color: black;
        background: lightseagreen;

    }
    Text {
        text: "Hello World";
        color: white;
    }
    TouchArea {
        clicked => {
            debug("clicked");
        }
    }
}
```
</CodeSnippetMD>

To add touch you can use Slints built in `TouchArea` component. It automatically fills its parent
and when touched or clicked it will call its built in 'callback' function called `clicked`.

To then create a more complex component with multiple buttons it will look like this.