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

The `StyledText` element renders text with various styling and interactive properties, such as bolded, underlined and colored sections as well as HTTP links. It is based on a subset of the [commonmark](https://commonmark.org/) spec.

<CodeSnippetMD imagePath="/src/assets/generated/styled-text-1.png" imageAlt="Styled Text Example" imageWidth="200" imageHeight="200" scale="3">
```slint
export component Example inherits Window {
    in property <string> value: 55;
    width: 200px;
    height: 200px;
    StyledText {
      text: @markdown("This is a piece of <u>Styled Text</u>\n"
                      "with a red value inserted:"
                      "<font color=\"red\">\{value}</font>");
    }
}
```
</CodeSnippetMD>


## Features

Styled Text supports the following features:

Feature        | Method
---------------|-------
Italics        | Builtin
Strikethroughs | Builtin
Inline code    | Builtin
Links          | Builtin
Ordered and unordered lists | Builtin
Underlines     | `<u>` HTML tag
Text Colors    |`<font color="...">` HTML tags

### Currently Unsupported

Feature          |
-----------------|
Headings         |
Images           |
Tables           |
Block Quotes     |
Subscripts       |
Superscripts     |
Horizontal Rules |
Footnotes        |
Math expressions |
Other HTML tags  |

## Properties

### default-color
<SlintProperty propName="default-color" typeName="brush" defaultValue="<depends on theme>">
The default color of the text, used when no color is specified via markup.
</SlintProperty>

### default-font-family
<SlintProperty propName="default-font-family" typeName="string">
The default font family used to render the text, when no font is specified via markup. If left empty, the value falls back to the enclosing `Window`'s `default-font-family`.
</SlintProperty>

### default-font-size
<SlintProperty propName="default-font-size" typeName="length">
The default font size used to render the text, when no size is specified via markup. If unset (or zero), the value falls back to the enclosing `Window`'s `default-font-size`.
</SlintProperty>

### horizontal-alignment
<SlintProperty propName="horizontal-alignment" typeName="enum" enumName="TextHorizontalAlignment">
The horizontal alignment of the text.
</SlintProperty>

### link-color
<SlintProperty propName="link-color" typeName="color" defaultValue="#0000ff">
The color used for rendering links in the text.
</SlintProperty>

### max-lines
<SlintProperty propName="max-lines" typeName="int" defaultValue="0">
The maximum number of lines to display. Wrapped lines count towards the limit.
Values less than or equal to zero don't limit the number of lines.
</SlintProperty>

### text
<SlintProperty propName="text" typeName="styled-text" defaultValue="&quot;&quot;">
The styled text rendered, using CommonMark markup with additional HTML tags for styling.
</SlintProperty>

### vertical-alignment
<SlintProperty propName="vertical-alignment" typeName="enum" enumName="TextVerticalAlignment">
The vertical alignment of the text.
</SlintProperty>

## Callbacks

### link-clicked(link: [string](/reference/property-types/strings/#string))
A callback that's invoked when a link in the text is clicked. The parameter contains the clicked link as a string.