May differ slightly from the actual interface.
This setting applies to the supplementary text
Text
May differ slightly from the actual interface.
Key Point:
Set the supplementary text displayed above the button (outside the button). Ideal for short appeals or taglines.
What this changes:
Creates a path to deliver additional information first without interfering with the main button text.
Adjustment tips:
Structure it with the value proposition on line 1 and supplementary details on line 2 for easy comprehension.
Settings
Text(up to 2 lines): Place the appeal on line 1 and the supplementary note on line 2 for a clear role separation.
Micro Copy is displayed above and outside the button. This is different from "Micro Text," which is displayed inside the button at the top. Choose the appropriate one based on your use case. When the text is empty, the Micro Copy area is not rendered.
No hover support:
Micro Copy does not have hover-state settings. Hover changes are controlled through the button body (Style Settings, Background Settings, Icon Settings, etc.).
Style
May differ slightly from the actual interface.
Key Point:
Set the decorative style type. Quickly switch how the supplementary text is presented.
What this changes:
The same text can feel like an "emphasis" or a "supplement" depending on the style.
Adjustment tips:
Keep the Micro Copy less prominent than the main button, preserving its role as supplementary information.
Settings
Style(01-05): Switch between decoration levels and framing to visually adjust the information priority. The default is01.
Each style number applies a different preset decoration including background color, border, and Border Radius. After applying a style, you can still override individual properties through the Border, Border Radius, and Color settings.
Border
May differ slightly from the actual interface.
Key Point:
Set the border color, thickness, and style. This defines the element's outline and helps users recognize it as a clickable element.
What this changes:
Even with a light background, a border makes the boundary clearly visible.
Adjustment tips:
Overly thick borders reduce the prominence of the text, so start with around 1px and adjust from there.
Settings
Color+Alpha: Border color and transparency. Adjust this first if the border blends into the background.Width: Border thickness. Start thin to avoid competing with the main button text.Style: Line style (solid, dashed, etc.). Used to adjust the decorative tone.
Border Radius
May differ slightly from the actual interface.
Key Point:
Set the corner roundness of the element. Adjust your brand tone (formal or soft) at the impression level.
What this changes:
The perceived roundness depends on the ratio between the Border Radius value and the element size.
Adjustment tips:
Aim for roughly 20-35% of the element height as a starting point for a balanced look that is neither too round nor too sharp.
Settings
Border Radius: Corner roundness. Using a slightly smaller value than the main button helps maintain the visual hierarchy.
Color
May differ slightly from the actual interface.
Key Point:
Set the base color. This is the foundation color of the layer structure.
What this changes:
The final impression is determined by the relationship between overlay, text color, and this base color.
Adjustment tips:
Prioritize colors that maintain readability when combined with text and background, rather than colors that look striking on their own.
Settings
Text Color+Alpha: Text color. Use approximately one step less contrast than the main button text as a guideline.Background Color / Gradient+Alpha: Background color. Adjust the intensity so the supplementary element does not overpower the design.
Font
May differ slightly from the actual interface.
Key Point:
Set the typeface and text formatting for the Micro Copy. Even for short text, this is key to establishing readability and information hierarchy.
What this changes:
The combination of size, weight, and Line Height prevents the supplementary text from being "too prominent."
Adjustment tips:
Start with aFont Size 1-2 steps smallerand aslightly lighter weightthan the main button for easy adjustment.
Settings
Font Family: Typeface. Keeping the same font family as the body text maintains page-wide consistency.Font Weight: Weight. A lighter weight than the main text naturally communicates information priority.Font Size: Text size. Determine the minimum readable size on mobile first, then adjust for PC.Line Height: Line spacing. Prevents cramping when displaying 2 lines and improves scannability.Letter Spacing: Character spacing. Keep adjustments minimal — excessive spacing reduces readability, especially for Japanese text.
Text Shadow
May differ slightly from the actual interface.
Key Point:
Set the text shadow. Useful for reinforcing readability over background images.
What this changes:
Shadow strength affects the balance between visibility and decorative feel.
Adjustment tips:
Start with a smallBlurand lowAlpha, then gradually increase only as much as needed.
Settings
Color+Alpha: Shadow color and transparency. Used to assist readability over background images.Blur: Blur amount. Keeping it small is the baseline to avoid breaking the text outline.Horizontal: Horizontal offset. Keep the value conservative, as it easily creates an unnatural appearance.Vertical: Vertical offset. A slight downward shift tends to look the most natural.
Layout
May differ slightly from the actual interface.
Key Point:
Set the Micro Copy spacing and position. The distance from the main button creates visual grouping.
What this changes:
Proper spacing stabilizes the reading order and makes information easier to grasp at a glance.
Adjustment tips:
Start by settingMarginfor the outer distance. Only addPaddingandRotationwhen needed to avoid breaking the layout.
Settings
Margin: Outer spacing. Controls the distance from the main button to adjust visual separation.Padding: Inner spacing. Relieves the cramped feel when a background-styled layout is applied.Transform > Rotation (deg): Rotation. Use only for accent purposes and keep it subtle to prioritize readability. The default value is0.
All Micro Copy settings support responsive design. Be sure to check the layout when text wraps to 2 lines on mobile. Margin and Padding values can be set individually per device.
Differences from other supplementary text:
Micro Copy is the most feature-rich of the four supplementary text types (Micro Copy, Sub Copy, Micro Text, Sub Text). Style presets, Border, Border Radius, and Background Color/Gradient are available only in Micro Copy and not in the other three. Choose Micro Copy when you need supplementary text with decorative styling.