<flowbite-button (click)="this.modal.open()">Open modal</flowbite-button>
<flowbite-modal #modal [dismissable]="true" [size]="'md'" [isOpen]="false"> 
    <flowbite-modal-header>Terms of Service</flowbite-modal-header>
    <flowbite-modal-body>
        <p class="mb-2 text-gray-500 dark:text-gray-400">
            With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
        </p>
        <p class="text-gray-500 dark:text-gray-400">
            The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
        </p>
    </flowbite-modal-body>
    <flowbite-modal-footer>
        <flowbite-button (click)="modal.close()">I accept</flowbite-button>
        <flowbite-button (click)="modal.close()" [color]="'gray'">I decline</flowbite-button>   
    </flowbite-modal-footer>
</flowbite-modal>

<div class="flex flex-row gap-1">
    <flowbite-button (click)="this.modalSmall.open()">Small</flowbite-button>
    <flowbite-button (click)="this.modalMedium.open()">Medium</flowbite-button>
    <flowbite-button (click)="this.modalLarge.open()">Large</flowbite-button>
    <flowbite-button (click)="this.modalExtraLarge.open()">Extra large</flowbite-button>
</div>
<flowbite-modal #modalSmall [size]="'sm'">
    <flowbite-modal-header>Terms of Service</flowbite-modal-header>
    <flowbite-modal-body>
        <p class="mb-2 text-gray-500 dark:text-gray-400">
            With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
        </p>
        <p class="text-gray-500 dark:text-gray-400">
            The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
        </p>
    </flowbite-modal-body>
    <flowbite-modal-footer>
        <flowbite-button (click)="modalSmall.close()">I accept</flowbite-button>
        <flowbite-button (click)="modalSmall.close()" [color]="'gray'">I decline</flowbite-button>
    </flowbite-modal-footer>
</flowbite-modal>
<flowbite-modal #modalMedium [dismissable]="true" [size]="'md'">
    <flowbite-modal-header>Terms of Service</flowbite-modal-header>
    <flowbite-modal-body>
        <p class="mb-2 text-gray-500 dark:text-gray-400">
            With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
        </p>
        <p class="text-gray-500 dark:text-gray-400">
            The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
        </p>
    </flowbite-modal-body>
    <flowbite-modal-footer>
        <flowbite-button (click)="modalSmall.close()">I accept</flowbite-button>
        <flowbite-button (click)="modalSmall.close()" [color]="'gray'">I decline</flowbite-button>
    </flowbite-modal-footer>
</flowbite-modal>
<flowbite-modal #modalLarge [dismissable]="true" [size]="'lg'">
    <flowbite-modal-header>Terms of Service</flowbite-modal-header>
    <flowbite-modal-body>
        <p class="mb-2 text-gray-500 dark:text-gray-400">
            With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
        </p>
        <p class="text-gray-500 dark:text-gray-400">
            The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
        </p>
    </flowbite-modal-body>
    <flowbite-modal-footer>
        <flowbite-button (click)="modalSmall.close()">I accept</flowbite-button>
        <flowbite-button (click)="modalSmall.close()" [color]="'gray'">I decline</flowbite-button>
    </flowbite-modal-footer>
</flowbite-modal>
<flowbite-modal #modalExtraLarge [size]="'xl'">
    <flowbite-modal-header>Terms of Service</flowbite-modal-header>
    <flowbite-modal-body>
        <p class="mb-2 text-gray-500 dark:text-gray-400">
            With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
        </p>
        <p class="text-gray-500 dark:text-gray-400">
            The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
        </p>
    </flowbite-modal-body>
    <flowbite-modal-footer>
        <flowbite-button (click)="modalSmall.close()">I accept</flowbite-button>
        <flowbite-button (click)="modalSmall.close()" [color]="'gray'">I decline</flowbite-button>
    </flowbite-modal-footer>
</flowbite-modal>