Components

Button

Trigger Anything with a Single Click

The Button component is your go-to for interactive elements that drive action. Whether you want to open overlays, trigger modals, scroll to sections, or perform custom behaviors, this component does it all. With full visual customization and accessibility support, you can create functional buttons that align perfectly with your design and user expectations.

Combine power with simplicity by configuring predefined actions and styling them to match your brand without writing any code.

Powerful Action Triggers

  1. Flexible Interactions.
    Trigger overlays, modals, or other events.

  2. Data-Driven.
    Pass parameters, such as IDs to actions.

  3. Perfect for complex workflows.
    Chain multiple actions if needed.

Complete Styling & Accessibility

  1. Accessible by Design.
    Complies with WCAG standards out of the box.

  2. Fully Customizable.
    Design CTAs, icons, or dynamic labels easily.

  3. Consistent Theming.
    Apply global or component-specific themes.

Use Cases

  • Open modals or overlays (e.g., contact forms or menus)

  • Scroll to sections or trigger page transitions

  • Toggle elements (e.g., accordions, dropdowns)

  • Act as CTA buttons across pages and components

  • Integrate with structured workflows for multi-step interactions

From simple form triggers to complex interface interactions, the Button component provides the flexibility to support any user journey or feature flow.

Configuration Options & Features

The Button component is more than a clickable element, it is an imaginative, themeable action trigger built to empower interaction across your project.

From accessibility and styling to powerful functional logic, it’s the perfect companion for clean, effective, and dynamic UX.

Actions

This field allows you to attach one or more predefined functions to the button. Each action consists of:

  • Function – The action type to trigger (e.g., toggleOverlay, scrollToSection, etc.)

  • Data – The data passed to the function in object form (e.g., { id: 'menu-overlay' })

This gives complete control over interaction logic while remaining easy to configure.

Aria Label

A text string used for screen readers and assistive technology to describe the function of the button.

Highly recommended for accessibility compliance, especially when the visual content isn’t self-explanatory.

Content

The visual content is inside the button.

This content can be plain text, icons, or even a combination of content blocks, whatever you want the user to click on.

Component Theme

Applies the theme settings to the entire button wrapper.

Use this to manage spacing, borders, colors, hover effects, and other design aspects of the button’s appearance.