<button class="btn btn-sm btn-secondary" id="notice-default">Default</button>
    <button class="btn btn-sm btn-warning" id="notice-warning">Warning</button>
    <button class="btn btn-sm btn-danger" id="notice-danger">Danger</button>
    <button class="btn btn-sm btn-info" id="notice-info">Info</button>
    <button class="btn btn-sm btn-primary" id="notice-primary">Primary</button>
    <button class="btn btn-sm btn-secondary" id="notice-secondary">Secondary</button>
    <button class="btn btn-sm btn-success" id="notice-success">Success</button>

    <script>
        $('#notice-default').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.");
        });

        $('#notice-warning').click(function () {
            CoreUI.notice.warning("Hello, world! This is a toast message.");
        });

        $('#notice-danger').click(function () {
            CoreUI.notice.danger("Hello, world! This is a toast message.");
        });

        $('#notice-info').click(function () {
            CoreUI.notice.info("Hello, world! This is a toast message.");
        });

        $('#notice-primary').click(function () {
            CoreUI.notice.primary("Hello, world! This is a toast message.");
        });

        $('#notice-secondary').click(function () {
            CoreUI.notice.secondary("Hello, world! This is a toast message.");
        });

        $('#notice-success').click(function () {
            CoreUI.notice.success("Hello, world! This is a toast message.");
        });
    </script>
                                

    <button class="btn btn-sm btn-secondary" id="notice-position-top-left">Top left</button>
    <button class="btn btn-sm btn-secondary" id="notice-position-top-right">Top right</button>
    <button class="btn btn-sm btn-secondary" id="notice-position-top-center">Top center</button>
    <button class="btn btn-sm btn-secondary" id="notice-position-bottom-center">Button center</button>
    <button class="btn btn-sm btn-secondary" id="notice-position-bottom-left">Button left</button>
    <button class="btn btn-sm btn-secondary" id="notice-position-bottom-right">Button right</button>

    <script>
        $('#notice-position-top-left').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { position: 'top-left' });
        });
        $('#notice-position-top-center').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { position: 'top-center' });
        });
        $('#notice-position-top-right').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { position: 'top-right' });
        });
        $('#notice-position-bottom-left').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { position: 'bottom-left' });
        });
        $('#notice-position-bottom-center').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { position: 'bottom-center' });
        });
        $('#notice-position-bottom-right').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { position: 'bottom-right' });
        });
    </script>
                                

    <button class="btn btn-sm btn-secondary" id="notice-custom-colors">Custom colors</button>
    <button class="btn btn-sm btn-secondary" id="notice-icon-info"><i class="bi bi-info"></i> Icon</button>
    <button class="btn btn-sm btn-success" id="notice-icon-check"><i class="bi bi-check"></i> Icon</button>
    <button class="btn btn-sm btn-warning" id="notice-icon-triangle"><i class="bi bi-exclamation-triangle"></i> Icon</button>

    <script>
        $('#notice-custom-colors').click(function () {
            CoreUI.notice.info("Hello, world! This is a toast message.", {
                textColor: '#ffffffd9',
                bgColor: '#712cf9',
            });
        });
        $('#notice-icon-info').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", { icon: 'bi bi-info' });
        });
        $('#notice-icon-check').click(function () {
            CoreUI.notice.success("Hello, world! This is a toast message.", { icon: 'bi bi-check' });
        });
        $('#notice-icon-triangle').click(function () {
            CoreUI.notice.warning("Hello, world! This is a toast message.", { icon: 'bi bi-exclamation-triangle' });
        });
    </script>
                                

    <button class="btn btn-sm btn-secondary" id="notice-actions-btn">Action button</button>
    <button class="btn btn-sm btn-secondary" id="notice-actions-timer">Timer</button>

    <script>
        $('#notice-actions-btn').click(function () {
            CoreUI.notice.default("Hello, world! This is a toast message.", {
                buttons: [
                    {
                        text: 'Button 1',
                        onclick: function () {
                            this.hide();
                            CoreUI.notice.success("Hello, world! This is a toast message.");
                        }
                    },
                    {
                        text: 'Button 2',
                        onclick: function () {
                            this.hide();
                        }
                    }
                ],
                onClose: function () { console.log('close') }
            });
        });
        $('#notice-actions-timer').click(function () {
            let notice = CoreUI.notice.default("Timer: 5", {
                timeout: 0
            });

            let time       = 4;
            let intervalId = setInterval(function () {
                notice.setMessage("Timer: " + time);
                time--;
                if (time < 0) {
                    notice.hide();
                    clearInterval(intervalId);
                }
            }, 1000);
        });
    </script>