import { h } from "@stencil/core";
export class NdsButtonUsage {
    constructor() {
        this.variant = 'neutral';
    }
    render() {
        return (h("div", { key: 'b465a949780182358de55de5b730709552676874' }, h("h1", { key: '03372103769f08812e1d345f58c18b54019635a8' }, "Button Example"), h("div", { key: 'bf3dedaba30aeed92d5125a41e9aceed561c2662', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'a8ea32499a9b87c234a381a3b8be8f9727a9f164', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-flex", { key: '9a5ed298befb4aaea057a96f0b06ddb3dfe586bf', direction: "column", spacing: 16 }, h("dga-button-v2", { key: 'a7f2073287e673f87086288496261bd17f014f05', label: "Button", variant: "primary", size: "lg" }), h("dga-button-v2", { key: 'cb57224836babd993e05539f3420daa316116703', label: "Button", variant: "primary", size: "md" }), h("dga-button-v2", { key: 'cc35a6f2f6aa5289d602d699c2700bcdd9d478f9', label: "Button", variant: "primary", size: "sm" }), h("dga-button-v2", { key: '462ce6bb501c92e22cbc86076586b12fe40509b6', label: "Button", variant: "neutral", size: "lg" }), h("dga-button-v2", { key: '2762aaa5be5e6001092d3839636b970f0913b5f5', label: "Button", variant: "neutral", size: "md" }), h("dga-button-v2", { key: '7e63c04181f791b7ddc4e71157ac7aeecb131f1c', label: "Button", variant: "neutral", size: "sm" }), h("dga-button-v2", { key: '0147c19e8764f61a441fbca60cfc0bbb58f2e4a0', label: "Button", variant: "secondary-solid", size: "lg" }), h("dga-button-v2", { key: 'c924c7bdde689fd02707f8eb531a532e1aa8ef2c', label: "Button", variant: "secondary-solid", size: "md" }), h("dga-button-v2", { key: 'ca3614b4eee886253984cc1f443a273f5d2452cd', label: "Button", variant: "secondary-solid", size: "sm" }), h("dga-button-v2", { key: 'a65bce6b55ace2b13cc019a5b7b30b0b80f4ff42', label: "Button", variant: "primary", destructive: true, size: "lg" }), h("dga-button-v2", { key: 'ed722f59226e4df482c334eeb54725ea53cd94bd', label: "Button", variant: "primary", destructive: true, size: "md" }), h("dga-button-v2", { key: '5ceadbf8a23cf10edf4c397582bfe2109dfb8ed3', label: "Button", variant: "primary", destructive: true, size: "sm" })), h("dga-button-v2", { key: '38a11be42a3db50fb375c01ac322630040cb48b9', label: "Button", variant: "primary", onColor: true }, h("dga-button-leading-icon", { key: '9d963f9663ad29c98b299a3fd0dd4fbe664aed0c', name: "link-square-01", size: 16, color: "red" })), h("dga-button-v2", { key: '575c700fac6b47944a03acbc59276b3593e15e36', label: "Source code", variant: "secondary-outline", leadIcon: true, leadIconProps: { name: 'source-code', variant: 'stroke', type: 'standard' } }), h("dga-button-v2", { key: '550293a59f1727ca24036ada871d3feb40ed7f31',
            // 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: '203bb002ffc7d2a229e2fa021b0cd4df4a71ddec', style: { display: 'flex', flexDirection: 'column', gap: '20px', backgroundColor: '#074D31', padding: '20px' } }, h("nds-button", { key: '7191372aff562ea79a6ecc17a4de3150948285bb', label: "Button", variant: "primary-brand", size: "lg" }), h("nds-button", { key: '06154b18f40672678099c9864c1f495c6538a570', label: "Button", variant: "primary-brand", size: "lg", selected: true }), h("nds-button", { key: '22de52cb09c69dba500b5796dffdb2c6981b81ca', leadingIcon: 'link-square-01', size: 'sm' }, h("dga-icon-v2", { key: '2d49caf1e6765e6229966e6ae2c9eb465baa5bd5', slot: 'leading-icon', name: 'source-code', variant: 'stroke', type: 'rounded', size: 16, color: 'white' }))), h("dga-icon-v2", { key: '04a4d740a417bb0b99408ace9fe816d2b600e2c5', name: 'link-square-01', variant: 'stroke', type: 'rounded', color: 'red' }), h("div", { key: '22bc83a472af70232305eddd67c9549e88b705ee', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
    static get is() { return "nds-button-usage"; }
    static get states() {
        return {
            "variant": {}
        };
    }
}
