Modal

<@button style='modal' buttonTargetId='#modalDefault' title='Launch Default Modal' />
<@modal id='modalDefault'>
    <@modalHeader modalTitle='Default Modal' />
    <@modalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
            Cras elementum ultrices diam.
    </@modalBody>
    <@modalFooter>
            <@button params='data-bs-dismiss="modal"' title='Close' color='secondary' />
            <@button title='Save changes' />
    </@modalFooter>
</@modal>

<@button style='modal' buttonTargetId='#modalDefaultNVC' title='Launch Default Modal
(Not vertically centered)' />
<@modal id='modalDefaultNVC' vCentered=false>
    <@modalHeader modalTitle='Default Modal' />
    <@modalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
            Cras elementum ultrices diam.
    </@modalBody>
    <@modalFooter>
            <@button params='data-bs-dismiss="modal"' title='Close' color='secondary' />
            <@button title='Save changes' />
    </@modalFooter>
</@modal>

<@button style='modal' buttonTargetId='#modalSm' title='Launch Small Modal' />
<@modal id='modalSm' size='sm'>
    <@modalHeader modalTitle='Small Modal' />
    <@modalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
            Cras elementum ultrices diam.
    </@modalBody>
    <@modalFooter>
            <@button params='data-bs-dismiss="modal"' title='Close' color='secondary' />
            <@button title='Save changes' />
    </@modalFooter>
</@modal>

<@button style='modal' buttonTargetId='#modalLg' title='Launch Large Modal' />
<@modal id='modalLg' size='lg'>
    <@modalHeader modalTitle='Large Modal' />
    <@modalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
            Cras elementum ultrices diam.
    </@modalBody>
    <@modalFooter>
            <@button params='data-bs-dismiss="modal"' title='Close' color='secondary' />
            <@button title='Save changes' />
    </@modalFooter>
</@modal>

<@button style='modal' buttonTargetId='#modalXl' title='Launch Extra Large Modal' />
<@modal id='modalXl' size='xl'>
    <@modalHeader modalTitle='Extra Large Modal' />
    <@modalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
            Cras elementum ultrices diam.
    </@modalBody>
    <@modalFooter>
            <@button params='data-bs-dismiss="modal"' title='Close' color='secondary' />
            <@button title='Save changes' />
    </@modalFooter>
</@modal>

<@button style='modal' buttonTargetId='#modalFs' title='Launch Full Screen Modal' />
<@modal id='modalFs' fullScreen=true>
    <@modalHeader modalTitle='Full screen Modal' />
    <@modalBody>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
            Cras elementum ultrices diam.
    </@modalBody>
    <@modalFooter>
            <@button params='data-bs-dismiss="modal"' title='Close' color='secondary' />
            <@button title='Save changes' />
    </@modalFooter>
</@modal>