---
title: Badge
description: Badge API.
---

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD imagePath="" noScreenShot scale="3" imageWidth="300" imageHeight="200" imageAlt="">
```slint
import { Badge } from "@material";
export component Example inherits Window {
    width: 100px;
    height: 50px;
    background: transparent;
    Badge {
        text: "3";
        x: 10px;
        y: 10px;
    }
}
```
</CodeSnippetMD>

A `Badge` is a small status indicator, often used to display a count or status on top of another component (such as an icon or button).

## Properties

### text
<SlintProperty propName="text" typeName="string">
The text or number displayed inside the badge. If empty, the badge is shown as a small dot.
</SlintProperty>