Buttons

The Buttons section offers a flexible way to incorporate customizable buttons into your theme, enhancing user interaction and navigation. You can adjust the alignment, layout, and style of buttons to fit your design needs. This section allows for seamless integration across different devices, ensuring a consistent user experience.

Key features include options for button width, layout, and style, allowing you to maintain design consistency or highlight specific actions. You can also control the position of icons relative to button text and decide the vertical placement of buttons in relation to content.

Practical usage examples include creating a call-to-action row using the Row layout with Primary button style, or designing a vertical navigation menu with the Column layout and Icon only button layout. For mobile optimization, enabling Display full width on mobile ensures buttons are easily tappable, enhancing the user experience on smaller screens.

Overview

The Buttons section is designed to provide a customizable row or column of buttons within your theme. This section allows you to adjust the alignment, layout, and style of buttons to suit your design needs, enhancing user interaction and navigation.

Key components and functionality

Alignment

Control the alignment of buttons to ensure they fit seamlessly into your design across different devices.

• Alignment - Desktop: Adjusts the alignment of buttons when viewed on desktop devices.
• Alignment - Mobile: Adjusts the alignment of buttons when viewed on mobile devices.

Button width

Determine the width of the buttons within the section to maintain consistency or highlight specific actions.

• Options:
  • Default: Buttons will have their default width.
  • Equal width: All buttons will have the same width.

Layout

Choose how the buttons are arranged within the section to best fit your design and user interaction goals.

• Options:
  • Row: Buttons are arranged in a horizontal line.
  • Column: Buttons are arranged in a vertical line.

Button style

Select from various styling options to ensure buttons match your theme's aesthetic and functional needs.

• Options:
  • Primary: Standard button style.
  • Secondary: Alternative button style.
  • Extra large: Larger button style for emphasis.
  • Plain: Minimalist button style.
  • Small: Smaller button style.
  • Small secondary: Smaller alternative button style.

Button layout

Decide the position of icons relative to the button text to enhance visual appeal and usability.

• Options:
  • Icon left: Icon is placed to the left of the text.
  • Icon right: Icon is placed to the right of the text.
  • Icon only: Only the icon is displayed, without text.

Button position

Control the vertical position of the buttons relative to the content to guide user interaction effectively.

• Options:
  • Above content: Buttons are positioned above the content.
  • Below content: Buttons are positioned below the content.
  • Default: Above content

Display full width on mobile

Enable or disable full-width display of buttons on mobile devices to ensure they are easily tappable.

• Default: False

Usage notes

• Responsive Design: Ensure that button alignment and layout are tested across different devices to maintain a consistent user experience.
• Performance: Avoid using too many buttons in a single section to prevent clutter and maintain fast loading times.
• Accessibility: Use descriptive text for buttons to ensure they are accessible to all users, including those using screen readers.

Usage examples

1. Creating a Call-to-Action Row: Use the Row layout with Primary button style to create a prominent call-to-action section that encourages users to take specific actions, such as signing up or purchasing.

2. Vertical Navigation Menu: Utilize the Column layout with Icon only button layout to create a sleek vertical navigation menu that fits seamlessly into the sidebar of your site.

3. Responsive Design: Enable Display full width on mobile to ensure buttons are easily tappable on smaller screens, enhancing the mobile user experience.