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 lower area inside the button. Useful for adding conditions or short descriptions.
What this changes:
Clarifies the meaning of the main label and reduces expectation gaps after the click.
Adjustment tips:
This text tends to wrap to two lines, so always verify line breaks and line height on mobile (SP).
Settings
Sub Text(up to 2 lines): States supplementary information or conditions for the main label, aligning user expectations with what happens after the click.
Sub Text is displayed inside the button, below the main text. This is different from "Sub Copy," which appears outside and below the button. When the text field is empty, the Sub Text area is not rendered. Well suited for short supplementary conditions such as pricing information or "Free first time."
No Hover support:
Sub 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 one step 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 Sub Text. Adjust it to remain readable while appearing more subdued than the main label.
What this changes:
Optimizing size and line height prevents the information inside the button from feeling cramped.
Adjustment tips:
Configure based on how the text looks at two lines on mobile (SP), then adjust appearance on desktop (PC) from there.
Settings
Font Family: Typeface. A baseline setting for maintaining consistency with the overall design.Font Weight: Weight. Use a lighter weight than the main label as a baseline; increase only when necessary.Font Size: Text size. Avoid making it too small, as it will go unread — prioritize the minimum legible size.Line Height: Line height. Adjusts readability and prevents a cramped feeling when the text wraps to two lines.Letter Spacing: Letter spacing. Fine-tune slightly to improve readability.
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. Compensates for insufficient contrast with the background.Blur: Blur radius. Too high a value causes blurring, so keep it low as a baseline.Horizontal: Horizontal offset. Produces a strong decorative feel, so keep it subtle.Vertical: Vertical offset. A small downward value creates a natural shadow.
Layout
May differ slightly from the actual interface.
Key Point:
Configure the spacing and position of Sub Text. Use these settings to manage the distance from the main label.
What this changes:
Proper spacing improves the grouping of information and reduces the chance users skip over it.
Adjustment tips:
Lock in the outer distance withMarginfirst, then addPaddingand rotation only when needed.
Settings
Margin: Outer spacing. Adjusts the gap from the main label to clarify the information order.Padding: Inner spacing. Ensures readability when a background decoration is applied.Transform > Rotation (deg): Rotation. Avoid strong effects; use a subtle angle for accent purposes. The default value is0.
All Sub Text settings are responsive. Be sure to verify font size and margin on mobile (SP) to ensure the text fits within the button. When using Micro Text and Sub Text simultaneously, the amount of information inside the button increases, so ensure sufficient Padding.
Difference from Micro Copy:
Sub 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" rather than "Sub Copy," as Micro Copy is placed outside the button and supports decorative options.