Seventh > Blocks > Button

Button

The Button block creates clickable buttons with customizable styling, sizes, colors, and optional icons. Perfect for call-to-action buttons, links, or interactive elements.

What it does

This block displays a button with:

• Customizable button text (label)
• Link functionality
• Multiple style options (solid, outline)
• Various size options
• Custom color support
• Optional icons (built-in or custom)
• Full-width option

Block settings explained

Button content

Label

• Enter the text that appears on the button
• Default: "Button label"

Link

• Enter a URL to make the button clickable
• Can link to products, collections, pages, or external URLs
• Leave blank for non-clickable button (not recommended)

Open link in a new tab (Only appears when Link is set)

• When enabled: Link opens in a new browser tab
• When disabled: Link opens in the same tab
• Default: Disabled

Button style

Style: Controls the button appearance:

• Solid - Filled button with background color (default)
• Outline - Button with border, transparent background

Size: Controls the button size

Fit container

• When enabled: Button uses maximum available width in container
• When disabled: Button size matches content
• Default: Disabled

Custom colors

Use custom colors

• When enabled: You can set custom button colors
• When disabled: Button uses theme colors
• Default: Disabled

Primary color: (Only appears when "Use Custom Colors" is enabled)

• Sets the button background color (for solid style) or border color (for outline style)
• Default: Black (#000000)

Secondary color: (Only appears when "Use Custom Colors" is enabled)

• Sets the button text color
• Default: White (#ffffff)

Icon

Icon

• Select a built-in icon to display on the button
• Options include: None, Earth Globe, Flag, Helpline, Like Hand, Map Marker, Security Shield, Star, Appointment, Archive Box, Box, Checkout Cart, Currency, Delivery, Delivery Time, Giftbox, Label, Open 24 Hours, Open Box, Paper Bag, Shipping Truck, Store, Time, Time Limit, Wallet
• Icons are organized by category (Business, Commerce)
• Default: None

Custom icon

• Upload a custom image to use as an icon
• Supports common image formats
• Overrides built-in icon if both are set

Common use cases

Call-to-Action buttons

• Use solid style for prominence
• Large or XLarge size for visibility
• Bold, action-oriented labels
• Link to product pages or collections
• Perfect for homepage hero sections

Navigation Buttons

• Use outline style for subtle appearance
• Medium size for standard navigation
• Link to pages or sections
• Great for menu items or section links

Icon buttons

• Add relevant icons to buttons
• Use custom icons for brand consistency
• Icons help communicate button purpose
• Perfect for feature buttons

Full-Width buttons

• Enable "Fit Container" for full-width buttons
• Use for mobile-friendly layouts
• Great for forms or checkout buttons
• Creates prominent call-to-action

Tips for success

Button styling

• Style choice - Solid for primary actions, outline for secondary
• Size - Match button size to importance (larger = more important)
• Colors - Use custom colors to match brand or stand out

Button text

• Clear labels - Use clear, action-oriented text
• Keep it short - Brief labels work best
• Be specific - "Shop Now" is better than "Click Here"

Linking

• Relevant links - Link buttons to related content
• New tab - Use "Open in New Tab" for external links
• User experience - Make button purpose clear from label

Icons

• Relevant icons - Choose icons that match button purpose
• Custom icons - Use custom icons for brand consistency
• Icon size - Icons automatically scale with button size

Troubleshooting

Button not clickable

Problem: Button doesn't link anywhere.

Solutions:

1. Check link - Verify link URL is set
2. URL format - Ensure URL includes http:// or https:// for external links
3. Link setting - Verify link is entered in block settings

Button colors not showing

Problem: Custom colors don't apply.

Solutions:

1. Check setting - Verify "Use Custom Colors" is enabled
2. Color values - Ensure colors are set correctly
3. Style - Remember: Primary = background (solid) or border (outline)

Button too large or small

Problem: Button size doesn't look right.

Solutions:

1. Check size setting - Adjust the Size setting
2. Fit container - Disable "Fit Container" if button is too wide
3. Context - Consider button context and surrounding content

Icon not displaying

Problem: Icon doesn't appear on button.

Solutions:

1. Check icon setting - Verify icon is selected (not "None")
2. Custom icon - If using custom icon, ensure image is uploaded
3. Icon priority - Custom icon overrides built-in icon if both are set