Button

Button

Buttons are important for guiding users and creating clear actions on a page. They help users navigate, make decisions, and interact with important content while adding emphasis and improving page structure.

Screenshot 2025-04-01 at 08.45.34.png

Templates

Creating a Button starts by selecting a template.

Admins and users with the special permissions can customize templates with their own colors and styles, then save them to the Module Library for others to reuse.


Configuration

Buttons include flexible configuration options that make it easy to adjust their appearance and behavior to match different use cases and align with company branding.

Screenshot 2025-04-01 at 08.52.32.png

Alignment

Alignment controls where the Button is positioned on the page relative to the content above it. Buttons can be aligned left, center, or right to match the desired layout and visual hierarchy.

Display elements

Elements such as icon and label can be enabled or disabled, providing flexibility to adapt to page layout.

Styling options

Styling options allow you to customize the button size, colors, corner radius, and icon position.

  • Corner radius: controls the rounding of button corners, ranging from sharp edges to fully rounded styles.

  • Size: select from predefined sizes (S, M, L) to fit various layouts and content hierarchies.

  • Icon position: defines whether the icon appears on the left or right side of the button label.

  • Color: colors follow a two-color system using background and text colors to ensure consistency across light and dark modes and alignment with the overall design system.

Content

The right sidebar provides access to all available content settings and updates dynamically based on the selected template.

  • Content: Button content can be edited directly in preview mode using inline editing or through the right sidebar.

  • Visuals: all templates allow adding icons, emojis, and logos.

Detailed information about available pickers and their configuration options is provided in the dedicated picker documentation.


Need help or want to connect?

Cards (by Optics)