import { html, css, cssManager, domtools } from '@design.estate/dees-element'; import '@design.estate/dees-wcctools/demotools'; import './dees-panel.js'; import './dees-form.js'; import './dees-form-submit.js'; import './dees-input-text.js'; import './dees-icon.js'; import type { DeesButton } from './dees-button.js'; export const demoFunc = () => html`
{ // Log button clicks for demo purposes const buttons = elementArg.querySelectorAll('dees-button'); buttons.forEach((button) => { button.addEventListener('clicked', () => { const type = button.getAttribute('type') || 'default'; console.log(`Button variant clicked: ${type}`); }); }); }}>
Default Secondary Destructive Outline Ghost Link Button
{ // Demonstrate size differences programmatically const buttons = elementArg.querySelectorAll('dees-button'); buttons.forEach((button) => { button.addEventListener('clicked', () => { const size = button.getAttribute('size') || 'default'; console.log(`Button size: ${size}`); }); }); }}>
Small Button Default Size Large Button
Small Secondary Default Destructive Large Outline
{ // Track icon button clicks const iconButtons = elementArg.querySelectorAll('dees-button'); iconButtons.forEach((button) => { button.addEventListener('clicked', () => { const hasIcon = button.querySelector('dees-icon'); if (hasIcon) { const iconName = hasIcon.getAttribute('iconFA') || 'unknown'; console.log(`Icon button clicked: ${iconName}`); } }); }); }}>
Add Item Delete Download
Settings Back Next
{ // Demonstrate status changes const pendingButton = elementArg.querySelector('dees-button[status="pending"]'); const successButton = elementArg.querySelector('dees-button[status="success"]'); const errorButton = elementArg.querySelector('dees-button[status="error"]'); // Simulate status changes if (pendingButton) { setTimeout(() => { console.log('Pending button is showing loading state'); }, 1000); } if (successButton) { successButton.addEventListener('clicked', () => { console.log('Success state button clicked'); }); } if (errorButton) { errorButton.addEventListener('clicked', () => { console.log('Error state button clicked'); }); } }}>
Normal Processing... Success! Error! Disabled
Small Loading Default Loading Large Loading
{ // Set up click handlers with the output element const output = elementArg.querySelector('#click-output'); const clickMeBtn = elementArg.querySelector('dees-button:first-of-type'); const dataBtn = elementArg.querySelector('dees-button[type="secondary"]'); const asyncBtn = elementArg.querySelector('dees-button[type="destructive"]'); if (clickMeBtn && output) { clickMeBtn.addEventListener('clicked', () => { output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`; }); } if (dataBtn && output) { dataBtn.addEventListener('clicked', (e: CustomEvent) => { output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`; }); } if (asyncBtn && output) { asyncBtn.addEventListener('clicked', async () => { output.textContent = 'Processing...'; await domtools.plugins.smartdelay.delayFor(2000); output.textContent = 'Action completed!'; }); } }}>
Click Me Click with Data Async Action
Click a button to see the result...
{ // Set up form submission handling const form = elementArg.querySelector('dees-form'); const output = elementArg.querySelector('#form-output'); if (form && output) { form.addEventListener('formData', (e: CustomEvent) => { output.innerHTML = 'Form submitted with data:
' + JSON.stringify(e.detail.data, null, 2); }); } // Track non-submit button clicks const draftBtn = elementArg.querySelector('dees-button[type="secondary"]'); const cancelBtn = elementArg.querySelector('dees-button[type="ghost"]'); if (draftBtn) { draftBtn.addEventListener('clicked', () => { console.log('Save Draft clicked'); }); } if (cancelBtn) { cancelBtn.addEventListener('clicked', () => { console.log('Cancel clicked'); }); } }}> Save Draft Cancel Submit Form
Submit the form to see the data...
{ // Log legacy type mappings const buttons = elementArg.querySelectorAll('dees-button'); buttons.forEach((button) => { const type = button.getAttribute('type'); if (type) { console.log(`Legacy type "${type}" is supported for backward compatibility`); } }); }}>
Normal → Default Highlighted → Destructive Discreet → Outline Big → Large Size

These legacy type values are maintained for backward compatibility but we recommend using the new variant system.

{ // Track action group clicks const actionGroup = elementArg.querySelectorAll('.vertical-group')[0]; const dangerGroup = elementArg.querySelectorAll('.vertical-group')[1]; if (actionGroup) { const buttons = actionGroup.querySelectorAll('dees-button'); buttons.forEach((button, index) => { button.addEventListener('clicked', () => { const action = ['Save Changes', 'Discard', 'Help'][index]; console.log(`Action group: ${action} clicked`); }); }); } if (dangerGroup) { const buttons = dangerGroup.querySelectorAll('dees-button'); buttons.forEach((button, index) => { button.addEventListener('clicked', () => { const action = ['Delete Account', 'Archive Data', 'Not Available'][index]; if (index !== 2) { // Skip disabled button console.log(`Danger zone: ${action} clicked`); } }); }); } }}>

Action Group

Save Changes Discard Help

Danger Zone

Delete Account Archive Data Not Available

Code Example:

<dees-button type="default" size="sm" @clicked="\${handleClick}">
  <dees-icon iconFA="faSave"></dees-icon>
  Save Changes
</dees-button>
`;