import { h } from "@stencil/core";
export class DgaButtonUsage {
    constructor() {
        this.variant = 'neutral';
    }
    render() {
        return (h("div", { key: 'be4a85cbf41b56c76281c961859131fb08d6f8d0' }, h("h1", { key: '1edef587510819207499567e77a3b672d59b5f03' }, "Button Example"), h("div", { key: '1bccf3a7f0b08ec40783c3095dd4feac80fbee81', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'a7e3bd0c672da4165bc8db44ab0a8ad3cca93436', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '1785e2b5475aa2d956543cc5401a4b2116d7582f', direction: "column", spacing: 16 }, h("dga-button-v2", { key: '929b4082befd3f4def64588ebafa49a6a55633b7', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'ca0283d999c56f778b0e6ae1e3094f47bb85dd42', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: '70909bf288a1bdc059a7c9213761a6c119f36128', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '4e259f2d7a276460bb3889190d6a6a0ba6823dbb', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: 'c07eb05ae85962b29d8db0bd933ab79901e1ab0d', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: 'eecbed187b7871e82ed9601f4d0bec4d856d1a1f', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: 'ef07a67fde37a36b4ef58e15caa79027b42f18fb', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: '81683f474f4c6c395c22b2236be89a8d8d0f4d47', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: '2c1507adc5db49659ee50a224e25e4e58e512825', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: '706013a8a92170e03b6588f4d4fc6c8686047c62', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: '794dab866aed3484f91ced1c4e341da991b65d5d', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '31b5423006c051e6ac66a1a4183ad20141b1fb4c', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: 'cd4aefd06a936add1cea3a3c0e3c495b8f26ff0f', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '66de9e14bdebbb90606b6ee1302fdf9a0ea39717', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: 'f713f147aa01342073bfb149d1416bbeaf5088c3', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: 'e6861ce265805281d430cf6eff789d9c7109886e',
            // className="absolute top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100"
            label: "See live preview", size: "lg", variant: "secondary-outline", trailIcon: true, trailIconProps: {
                name: 'link-square-01',
                variant: 'stroke',
                type: 'standard',
            } })), h("div", { key: '836b76cba91638104f58e331b14c6afdf482b9ac', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
    static get is() { return "dga-button-v2-usage"; }
    static get states() {
        return {
            "variant": {}
        };
    }
}
