Button

The Button block is a versatile tool designed to enhance user interaction by providing customizable button elements that can be integrated into various sections of a site. It offers a range of styling and layout options, making it adaptable to different design needs. Key features include the ability to add icons, customize button text, and specify link behavior, such as opening in a new tab.

Users can choose from various button styles, including Primary, Secondary, and Extra Large, and configure the button layout with options like Icon Left or Icon Only. The Button block also includes settings for full-width display on mobile devices and controls for horizontal alignment and visibility across different devices.

In practical use, the Button block can serve as a primary call-to-action in the Hero section, a navigation button in the Footer, or a product information button with an icon layout. These examples demonstrate the block's flexibility and its ability to enhance site navigation and user engagement.

Overview #

The Button block is designed to enhance user interaction by providing customizable button elements that can be integrated into various sections of a site. This block offers a range of styling and layout options, making it adaptable to different design needs.

Key components and functionality #

Button block

The Button block provides a flexible and customizable button element that can be used across different sections of a site. It includes several settings to tailor its appearance and behavior.

1. Icon Button

   • Allows the addition of an icon to the button for visual enhancement.
   • Default: No icon.

2. Button Text

   • Sets the text displayed on the button.
   • Default: "Button text".

3. Link

   • Specifies the URL the button will navigate to when clicked.

4. Open Link in a New Tab

   • Determines if the link should open in a new browser tab.
   • Default: false.

5. Button Style

   • Offers various styles for the button, including:
     • Primary
     • Secondary
     • Extra Large
     • Plain
     • Small
     • Small Secondary

6. Button Layout

   • Configures the layout of the button with options such as:
     • Icon Left
     • Icon Right
     • Icon Only

7. Display Full Width on Mobile

   • Ensures the button spans the full width of the screen on mobile devices.
   • Default: false.

Alignment settings

The alignment settings control the horizontal alignment of the button on both desktop and mobile devices, ensuring that the button is positioned correctly according to the design requirements.

Visibility settings

Visibility settings manage the visibility of the button across different devices, allowing for options like:

• Do not hide
• Hide on desktop
• Hide on mobile
• Default: Do not hide.

Available in sections #

The Button block can be used in the following sections:

• Featured product
• Footer navigation
• Rich text
• Product information
• Logo list
• Hero
• Buttons

Usage notes #

• Responsive Design: Ensure the "Display Full Width on Mobile" setting is enabled for buttons that need to be prominent on smaller screens.
• Performance: Use icons judiciously to maintain fast loading times.
• Accessibility: Always provide descriptive text for buttons to ensure they are accessible to all users, including those using screen readers.

Usage examples #

1. Primary Call-to-Action Button

   • Use the Button block in the Hero section with the "Primary" style to create a prominent call-to-action button that encourages users to explore more.

2. Navigation Button in Footer

   • Add the Button block to the Footer navigation section with a "Plain" style to provide a subtle navigation option that blends with the footer design.

3. Product Information Button

   • Implement the Button block in the Product information section with the "Icon Right" layout to offer additional product details or purchase options.