Button Components Demo

Getting Started

Follow these simple steps to add EZComponents buttons to your project:

Add the script to your HTML:


<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsbutton.js"></script>


<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsbuttonCreator.js"></script>

Create your first button:

// Create a button
const myButton = new EZButton(
    document.getElementById('button-container'),
    {
        text: 'My Button',
        style: 'primary',
        emoji: '👍'
    }
);

// Render the button
myButton.render();

Static Button Examples

Click on the buttons to see the event handlers in action.

// Create different button styles
const container = document.getElementById('static-buttons');

// Primary button with hover and click handlers
const primaryButton = new EZButton(
    container,
    {
        text: 'Primary Button',
        style: 'primary',
        emoji: '🚀',
        onHover: (isHovering, event, button) => {
            console.log(`Hover ${isHovering ? 'entered' : 'exited'}`);
        },
        onClick: (event, button) => {
            console.log('Button clicked!');
            button.setActive(!button.options.active);
        },
        onActive: (button) => {
            console.log('Button activated');
            // After 2 seconds, deactivate the button
            setTimeout(() => {
                button.setActive(false);
                console.log('Button automatically deactivated after 2s');
            }, 2000);
        },
        onInactive: (button) => {
            console.log('Button deactivated');
        }
    }
);
primaryButton.render();

// Secondary button
const secondaryButton = new EZButton(
    container,
    {
        text: 'Secondary',
        style: 'secondary'
    }
);
secondaryButton.render();

// Success button
const successButton = new EZButton(
    container,
    {
        text: 'Success',
        style: 'success',
        emoji: '✅'
    }
);
successButton.render();

// Danger button
const dangerButton = new EZButton(
    container,
    {
        text: 'Danger',
        style: 'danger',
        emoji: '⚠️'
    }
);
dangerButton.render();

// Link button
const linkButton = new EZButton(
    container,
    {
        text: 'Visit Site',
        style: 'link',
        url: 'https://example.com'
    }
);
linkButton.render();

// Disabled button
const disabledButton = new EZButton(
    container,
    {
        text: 'Disabled',
        style: 'primary',
        disabled: true
    }
);
disabledButton.render();

Button Creator Component

To use the creator:

Edit the text by clicking and typing
Click on the + icon to add an emoji
Click anywhere else on the button to open settings

Event Log:

// Events will appear here

// JSON output will appear here

// Initialize the button creator
const creator = new EZButtonCreator(
    document.getElementById('button-creator'),
    {
        initialData: {
            text: 'Click Me',
            style: 'primary',
            emoji: '👋'
        }
    }
);

// Initialize the creator
creator.init();

// Listen for updates
creator.on('update', (data) => {
    console.log('Button updated:', data);
    const eventLog = document.getElementById('event-log');
    eventLog.textContent += `\nUpdate: ${JSON.stringify(data, null, 2)}`;
    // Auto-scroll to bottom
    eventLog.scrollTop = eventLog.scrollHeight;
});

// Export JSON button
document.getElementById('export-json').addEventListener('click', () => {
    const jsonOutput = document.getElementById('json-output');
    const buttonData = creator.toJSON();
    jsonOutput.textContent = JSON.stringify(buttonData, null, 2);
});

Custom Button Styling

For detailed button styling options, please check out our Style Editor Demo.

// Button Styling API
const button = new EZButton(container, options);
button.render();

// Change specific CSS properties
button.setStyleProperty('backgroundColor', '#ff4040', 'root');
button.setStyleProperty('fontSize', '18px', 'text');
button.setStyleProperty('color', 'yellow', 'emoji');

// Get current style value
const bgColor = button.getStyleProperty('backgroundColor', 'root');

// Set multiple properties at once
button.setStyleProperties({
    borderRadius: '20px',
    boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
    padding: '12px 24px'
}, 'root');

// Available elements to style:
// - root: The main button container
// - text: The text content
// - emoji: The emoji element (if present)