Badge

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>