May differ slightly from the actual interface.
This setting applies to the supplementary text
Text
May differ slightly from the actual interface.
Key Point:
Configure the supplementary text displayed in the upper area inside the button. Ideal for category descriptions above the main label.
What this changes:
Allows a single button to carry a layered information hierarchy.
Adjustment tips:
Set the size smaller and the color lighter than the main label so it does not compete for attention.
Settings
Micro Text(up to 2 lines): Briefly supplements the context of the main label, helping users understand the content faster.
Micro Text is displayed inside the button, above the main text. This is different from "Micro Copy," which appears outside and above the button. When the text field is empty, the Micro Text area is not rendered. Best suited for short labels such as category names.
No Hover support:
Micro Text does not have Hover state settings. Hover changes are controlled through the button itself (Style Settings, Background Settings, Icon Settings, etc.).
Color
May differ slightly from the actual interface.
Key Point:
Set the base color. This serves as the foundation color in the layer structure.
What this changes:
The final visual impression is determined by the relationship between overlays and text color.
Adjustment tips:
Prioritize a color that remains readable against the background rather than one that looks striking on its own.
Settings
Text Color+Alpha: Text color and opacity. Set weaker than the main label to establish a clear information hierarchy.
Font
May differ slightly from the actual interface.
Key Point:
Configure the font for Micro Text. These settings ensure even small supplementary text remains legible.
What this changes:
The combination of size, weight, and line height determines both readability and the visual hierarchy with the main label.
Adjustment tips:
SetFont SizeandLine Heightfirst, then fine-tuneWeightandLetter Spacinglast.
Settings
Font Family: Typeface. Matching the body font helps maintain visual consistency.Font Weight: Weight. Use a lighter weight than the main label to present it as supplementary information.Font Size: Text size. Start from the minimum size that remains legible on mobile (SP).Line Height: Line height. Ensures readability when the text wraps to two lines.Letter Spacing: Letter spacing. Adjust slightly to relieve tightness.
Text Shadow
May differ slightly from the actual interface.
Key Point:
Configure the text shadow. Useful for reinforcing readability over background images.
What this changes:
Shadow intensity affects the balance between visibility and decorative appearance.
Adjustment tips:
Start with a lowBlurand lowAlpha, then increase gradually only as needed.
Settings
Color+Alpha: Shadow color and opacity. Use as a supplement when there is insufficient contrast with the background.Blur: Blur radius. Setting it too high makes the text outline appear fuzzy.Horizontal: Horizontal offset. Extreme values reduce readability.Vertical: Vertical offset. A small downward value produces a natural shadow.
Layout
May differ slightly from the actual interface.
Key Point:
Configure the position and spacing of Micro Text. Use the distance from the main label to control the reading order.
What this changes:
Proper vertical spacing lets users read information in stages, even within a compact button.
Adjustment tips:
Adjust the outer distance withMarginfirst, then addPaddingand rotation only when needed.
Settings
Margin: Outer spacing. Creates distance from the main label and guides the visual flow.Padding: Inner spacing. Prevents text from feeling cramped when a background decoration is applied.Transform > Rotation (deg): Rotation. Use at a subtle angle for accent purposes. The default value is0.
All Micro Text settings are responsive. Be sure to verify font size and margin on mobile (SP) to ensure the text fits within the button.
Difference from Micro Copy:
Micro Text does not include settings for Style presets, Border, Border Radius, or Background Color/Gradient (these are available only in Micro Copy). The available settings are text, text color, font, Text Shadow, and layout (Margin, Padding, rotation). If you need decorated supplementary text, consider using "Micro Copy," which is placed outside the button.