Skip to content

Text Formatting

Button labels support rich text formatting through tags. These work in label fields and other text displays.

Control text size:

Tag Effect
<xxs> Extra extra small
<xs> Extra small
<sm> Small
<md> Medium (default)
<lg> Large
<xl> Extra large
<2xl> 2x large
<3xl> 3x large
<4xl> 4x large
<5xl> 5x large

Example:

config:
label: "<xl>Large</xl> <sm>small</sm>"

Color text:

Tag Effect
<primary> Primary color
<accent> Accent color
<success> Success/green
<danger> Error/red
<foreground> Default text color

Example:

config:
label: "<success>Online</success> <danger>Offline</danger>"

Additional formatting:

Tag Effect
<strong> Bold text
<dim> 50% opacity
<blink> Blinking animation
*text* Highlight (asterisk syntax)

Example:

config:
label: "<strong>Important</strong> *highlighted*"
Syntax Effect
| Line break
&nbsp; Non-breaking space
config:
label: "<4xl>&nbsp;*HH*<blink>:</blink>|mm</4xl>"

Renders: Large time with blinking separator.

config:
label: "Line 1|Line 2"

Renders:

Line 1
Line 2
config:
label: "<success>●</success> Playing"

Renders: Green dot with “Playing” text.