Etat Pur Design System

Popup Auth 

<div x-data="{ show: false }">
    <button type="button" class="btn btn-solid btn-size-lg btn-dark" @click="show = true">
        Ouvrir la pop-up
    </button>

    <div x-cloak x-show="show" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="relative bg-white shadow-32 p-6 pt-10 max-w-md w-full">
            <button type="button" @click="show = false" aria-label="Label text" class="absolute top-4 right-4 z-10  btn  btn-neutral  btn-outline  btn-size-sm btn-only-icon">
                <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>

            <div class="flex flex-col gap-4 text-center">
                <h3 class="h4">Titre de la pop-up</h3>
                <p class="text-black/72 text-body-sm">
                    Voici un texte descriptif pour votre pop-up. Il peut être personnalisé selon vos besoins.
                </p>

                <div class="flex flex-col gap-4 justify-center">
                    <button type="button" class="w-full justify-center  btn  btn-dark  btn-solid  btn-size-lg">
                        Bouton 1

                    </button>
                    <button type="button" class="w-full justify-center  btn  btn-dark  btn-outline  btn-size-lg">
                        Bouton 2

                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div x-data="{ show: false }">
    <button type="button" class="btn btn-solid btn-size-lg btn-dark" @click="show = true">
        Ouvrir la pop-up
    </button>

    <div x-cloak x-show="show" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="relative bg-white shadow-32 p-6 pt-10 max-w-md w-full">
            {% render "@template-button" with {
                color: "neutral",
                type: 'outline',
                size: "sm",
                icon_type: 'only-icon',
                icon: {name:'heroicons--x-mark-outline'},
                button_class: "absolute top-4 right-4 z-10",
                custom_button_attrs:
                [
                    {
                        'name': '@click',
                        'value': "show = false"
                    },
                ]
            } %}

            <div class="flex flex-col gap-4 text-center">
                <h3 class="h4">Titre de la pop-up</h3>
                <p class="text-black/72 text-body-sm">
                    Voici un texte descriptif pour votre pop-up. Il peut être personnalisé selon vos besoins.
                </p>

                <div class="flex flex-col gap-4 justify-center">
                    {% render "@template-button" with {
                        label: "Bouton 1",
                        color: "dark",
                        type: "solid",
                        button_class: "w-full justify-center"
                    } %}
                    {% render "@template-button" with {
                        label: "Bouton 2",
                        color: "dark",
                        type: "outline",
                        button_class: "w-full justify-center"
                    } %}
                </div>
            </div>
        </div>
    </div>
</div>
 
/* No context defined. */

No notes defined.