Text Labels
Text Labels are descriptive texts that you can insert between other elements. They are ideal for explanations, notes, or additional information.
Creating a Text Label
Section titled “Creating a Text Label”- Tap + in the toolbar
- Select Text Label from the list
- A new Text Label will be added
- The Smart Panel opens automatically
Content Tab
Section titled “Content Tab”In the Content tab, you edit the text and optional icons.
What it does: The displayed text.
How to find it: Content > Text
Usage: Tap on the text field and enter your text. You can enter multi-line text. For multilingual apps, you can enter different text for each language.
Examples:
- “Push notifications allow us to inform you about important events.”
- “Your profile is currently public. Anyone can see it.”
- “For questions, you can reach us at support@example.com”
Leading Icon (Left Symbol)
Section titled “Leading Icon (Left Symbol)”What it does: An optional icon displayed to the left of the text.
How to find it: Content > Symbol Style (Left)
Usage:
- Tap “Select Symbol”
- Choose an icon from the gallery
Recommended Icons:
- Info Icon - For general notes
- Warning Icon - For important notes
- Lightbulb Icon - For tips
Trailing Icon (Right Symbol)
Section titled “Trailing Icon (Right Symbol)”What it does: An optional icon displayed to the right of the text.
How to find it: Content > Symbol Style (Right)
| Setting | Description |
|---|---|
| Custom Symbol (Right) | Enables manual configuration |
| Show Symbol | Whether the right symbol is visible |
| Select Symbol | Which icon is displayed |
| Icon Size | Size of the icon (12-48 px) |
| Icon Color | Color of the icon (with Dark Mode support) |
Style Tab
Section titled “Style Tab”In the Style tab, you customize the typography and layout.
Title Typography
Section titled “Title Typography”| Setting | Default | Range | Description |
|---|---|---|---|
| Font | Theme font | Gallery | The font family used |
| Font Size | 16 pt | 10-28 pt | Size of the text |
| Font Weight | 500 | 100-900 | Thickness of the font |
| Italic | Off | On/Off | Italicization of the text |
| Letter Spacing | 0 px | -2 to 5 px | Space between letters |
| Line Height | 1.2 | 1.0-2.0 | Space between lines |
| Text Color | Theme color | Color picker | Color of the text |
Layout
Section titled “Layout”| Setting | Default | Range | Description |
|---|---|---|---|
| Horizontal Spacing | 16 px | 0-48 px | Spacing left and right |
| Vertical Spacing | 12 px | 0-48 px | Spacing top and bottom |
Advanced Tab
Section titled “Advanced Tab”In the Advanced tab, you can make theme overrides.
Use Theme Settings
Section titled “Use Theme Settings”What it does: Enables or disables automatic adoption of theme colors.
Options:
| Setting | Effect |
|---|---|
| Enabled | Text Label automatically uses theme colors |
| Disabled | You can define custom colors |
When disabled, additional options appear:
Light Mode Colors
Section titled “Light Mode Colors”| Setting | Description |
|---|---|
| Text Color | Color of the text in Light Mode |
| Symbol Color | Color of the icons in Light Mode |
Dark Mode Colors
Section titled “Dark Mode Colors”| Setting | Description |
|---|---|
| Text Color (Dark) | Color of the text in Dark Mode |
| Symbol Color (Dark) | Color of the icons in Dark Mode |
Examples
Section titled “Examples”Simple Note Text
Section titled “Simple Note Text”| Setting | Value |
|---|---|
| Text | This setting cannot be undone. |
| Icon (Left) | Info icon |
| Font Size | 14 pt |
| Text Color | Secondary color (muted) |
Warning Note
Section titled “Warning Note”| Setting | Value |
|---|---|
| Text | Warning: Deleting your account is permanent! |
| Icon (Left) | Warning icon |
| Text Color | Red/Orange (warning color) |
| Font Weight | 600 |
Explanation Text Under a Header
Section titled “Explanation Text Under a Header”| Setting | Value |
|---|---|
| Text | Here you can specify which notifications you want to receive. |
| Icon (Left) | None |
| Font Size | 13 pt |
| Text Color | Secondary color (muted) |
| Font Weight | 400 |
Tip Box
Section titled “Tip Box”| Setting | Value |
|---|---|
| Text | Tip: You can set your profile to private at any time. |
| Icon (Left) | Lightbulb icon |
| Text Color | Primary color |
| Font Weight | 500 |
When to Use Text Labels?
Section titled “When to Use Text Labels?”Good Use Cases
Section titled “Good Use Cases”- Explanations - What exactly does a setting do?
- Notes - What should the user pay attention to?
- Tips - How can the user do something better?
- Context Info - Why is something important?
- Legal Notes - Brief privacy information
Less Good Use Cases
Section titled “Less Good Use Cases”- Long paragraphs (better to link to separate page)
- Complex instructions (better as FAQ or help page)
- Repetitive information (once is enough)