Sigta UI · Kit

Modal

Named modal with trigger

Have something worth drawing twice?

Tell us what you're building. We take on a handful of projects each quarter.
Source 
<sigta:modal.trigger name="demo">
        <sigta:button variant="primary">Open modal</sigta:button>
    </sigta:modal.trigger>

    <sigta:modal name="demo" heading="Have something worth drawing twice?">
        <sigta:text variant="muted">Tell us what you're building. We take on a handful of projects each quarter.</sigta:text>
        <div class="flex gap-3 mt-6">
            <sigta:button variant="primary">Confirm</sigta:button>
            <sigta:modal.close name="demo"><sigta:button variant="ghost">Cancel</sigta:button></sigta:modal.close>
        </div>
    </sigta:modal>

Sizes

Small modal

Compact confirmation.

Large modal

Room for a whole form.
Source 
<div class="flex gap-3">
        <sigta:modal.trigger name="small"><sigta:button size="sm">Small</sigta:button></sigta:modal.trigger>
        <sigta:modal.trigger name="large"><sigta:button size="sm">Large</sigta:button></sigta:modal.trigger>
    </div>
    <sigta:modal name="small" size="sm" heading="Small modal"><sigta:text>Compact confirmation.</sigta:text></sigta:modal>
    <sigta:modal name="large" size="lg" heading="Large modal"><sigta:text>Room for a whole form.</sigta:text></sigta:modal>