Band Settings Use Cases – ZenBlocks buttonBasic
Summary
Band Settings add a **diagonal ribbon or label band** to your button. They are useful for making short text like “SALE,” “NEW,” “Recommended,” or “Limited time” stand out. The band functions as a visual element independent of the button’s main text.
—
What is a Band?
A band is a decorative ribbon that overlaps diagonally at the corner of a button. It enables effects similar to product badges on e-commerce sites or “NEW” labels on real estate listing sites, applied directly to buttons.
### Band Features
– Can be placed at any of the four corners of the button
– Displayed at a diagonal angle
– Background color and text color can be set independently
– Displays independently from the button’s main text and icons
– Responsive support (size adjustable per device)—
Use Cases
### Case 1: Sale and campaign display
– Band text: “SALE”, “50% OFF”, “Limited time”
– Position: Top-left or top-right
– Color: Eye-catching red background + white text
– **Use case**: E-commerce sale buttons, campaign CTAs### Case 2: New and recommended display
– Band text: “NEW”, “Recommended”, “Popular”
– Position: Top-right
– Color: Brand color background + white text
– **Use case**: New feature announcement buttons, recommended plan selection buttons### Case 3: Limited availability and urgency display
– Band text: “3 seats left”, “Limited to 10”, “2 days left”
– Position: Top-left
– Color: Orange background + white text
– **Use case**: Event registration buttons, limited-quantity product purchase buttons### Case 4: Status labels
– Band text: “FREE”, “PRO”, “Beta”
– Position: Top-right
– Color: Gray or brand color
– **Use case**: Plan comparison buttons, free/paid distinction—
Related Settings
関連設定
– [バンド設定](../band/) – バンド詳細設定
– [スタイル設定](../style/) – ボタン本体の色・角丸
– [レイアウト設定](../layout/) – ボタンサイズ・余白