Button Block

Use Button for standalone calls to action inside containers, editorial sections, campaign layouts, and reusable content groups.

Setup Order

Write the labelUse a short action label that tells customers what happens next, such as Shop new arrivals, View size guide, or Contact us.
Add the linkChoose the destination and enable new-tab behavior only when leaving the store or opening a supporting resource.
Choose a button tierUse primary for the main action, secondary for supporting actions, and alternative for intentional campaign styling.
Use custom style only when neededCustomize typography, colors, border, hover states, and width when the global button tiers do not fit the local design need.
Preview long labelsCheck the longest expected label on mobile before publishing.

Setting group	What it controls
Label	Visible button text.
Link	Destination and optional new-tab behavior.
Style	Primary, secondary, alternative, or custom styling.
Custom typography	Font, size, case, weight, decoration, and letter spacing.
Custom colors	Text, background, transparency, blur, border, and hover colors.
Custom border	Border thickness and radius.
Width	Desktop and mobile fit or custom width.

Tier	Use
Primary	The main action in the current section or content group.
Secondary	A supporting action that should remain quieter than the primary action.
Alternative	A deliberate campaign or section-specific style defined in global settings.
Custom	A one-off style where local typography, color, border, hover, or width must differ from global tiers.

State	What to confirm
Missing link	The button is not published as a dead action.
Long label	Text fits on mobile without crowding or overflow.
Custom colors	Normal, hover, and focus states remain readable.
New-tab behavior	New-tab opening is intentional for the destination.
Multiple buttons	Primary and secondary actions have a clear hierarchy.