Button

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.