Component Documentation
Button
Secondary
Destructive
Outline
With Icon
Ghost
Button
Secondary
Destructive
Outline
With Icon
Ghost

Button

The Button component is a flexible, reusable element used to trigger actions or navigate users. It supports a variety of styles and configurations to suit different use cases โ€” from primary calls-to-action to subtle secondary interactions.

Usage

  1. Drag the Button component onto the canvas.
  2. Edit the button label using the Component Properties panel.
  3. Choose a visual style using Variant Mode:
    • Base
    • Secondary
    • Destructive
    • Outline
    • Ghost
  4. Enable link behavior, if needed, by toggling the link option in the properties panel.
  5. Add a leading or trailing icon to visually enhance the button or indicate direction.

This component is designed to work across layouts and screen sizes, and can be used in forms, navigation, modals, or any other interactive element in your design system.