Modal

The Modal component provides a reusable pattern for modal in the interface.

Modal

<div style="display: grid; gap: 16px; justify-content: start;  grid-template-columns: 1fr 1fr;">
                <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-standard" aria-label="Open standard modal" data-uid="69f0d0f92aa16" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92ab89" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open standard modal
            </span>
        
    </span> </button>                <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-small" aria-label="Open small modal" data-uid="69f0d0f92abf1" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92ac40" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open small modal
            </span>
        
    </span> </button>                <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-medium" aria-label="Open medium modal" data-uid="69f0d0f92ac8b" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92acc5" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open medium modal
            </span>
        
    </span> </button>                <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-large" aria-label="Open large modal" data-uid="69f0d0f92ad0b" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92ad56" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open large modal
            </span>
        
    </span> </button>                <button class="c-button open-modal u-margin__left--0 c-button__filled c-button__filled--secondary c-button--md" data-open="modal-panel" aria-label="Open panel modal" data-uid="69f0d0f92adb1" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--favorite c-icon--material c-icon--material-favorite material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="favorite" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92ade7" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Open panel modal
            </span>
        
    </span> </button>    </div>


        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--overlay-light" aria-labelledby="modal__label__modal-standard" aria-modal="true" role="dialog" id="modal-standard" data-uid="69f0d0f92af1f" data-component="modal">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-standard" data-uid="69f0d0f92af90" data-component="typography">
    Example modal standard
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="69f0d0f92afd9" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b019" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <div class="c-modal__content" tabindex="2">

        
                        <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" aria-label="chevron_left" type="button" data-uid="69f0d0f92b076" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b0ae" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        
                        <button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" aria-label="chevron_right" type="button" data-uid="69f0d0f92b0f5" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b12b" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>            </div>

            <div class="c-modal__footer">
            <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="69f0d0f92ae35" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Action
            </span>
        
    </span> </a>                <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-uid="69f0d0f92ae73" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Secondary action
            </span>
        
    </span> </a>
        </div>
    
                <!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="69f0d0f92b3f4" data-component="steppers">
    
</div>    </dialog>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-sm c-modal--padding-2 c-modal--border-radius-lg c-modal--overlay-light" aria-labelledby="modal__label__modal-small" aria-modal="true" role="dialog" id="modal-small" data-uid="69f0d0f92b4ce" data-component="modal">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-small" data-uid="69f0d0f92b50a" data-component="typography">
    Example modal small
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="69f0d0f92b556" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b595" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <div class="c-modal__content" tabindex="2">

        
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        
            </div>

            <div class="c-modal__footer">
            <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="69f0d0f92b449" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Action
            </span>
        
    </span> </a>                <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-uid="69f0d0f92b48b" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Secondary action
            </span>
        
    </span> </a>
        </div>
    
    </dialog>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-md c-modal--padding-3 c-modal--border-radius-md c-modal--overlay-light" aria-labelledby="modal__label__modal-medium" aria-modal="true" role="dialog" id="modal-medium" data-uid="69f0d0f92b669" data-component="modal">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-medium" data-uid="69f0d0f92b6a1" data-component="typography">
    Example modal medium
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="69f0d0f92b6e9" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b71f" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <div class="c-modal__content" tabindex="2">

        
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        
            </div>

            <div class="c-modal__footer">
            <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="69f0d0f92b5eb" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Action
            </span>
        
    </span> </a>                <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-uid="69f0d0f92b629" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Secondary action
            </span>
        
    </span> </a>
        </div>
    
    </dialog>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-modal c-modal--slide-up c-modal--size-lg c-modal--padding-4 c-modal--border-radius-sm c-modal--overlay-light" aria-labelledby="modal__label__modal-large" aria-modal="true" role="dialog" id="modal-large" data-uid="69f0d0f92b7df" data-component="modal">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-large" data-uid="69f0d0f92b812" data-component="typography">
    Example modal large
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="69f0d0f92b84b" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b882" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <div class="c-modal__content" tabindex="2">

        
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        
            </div>

            <div class="c-modal__footer">
            <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="69f0d0f92b76b" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Action
            </span>
        
    </span> </a>                <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-uid="69f0d0f92b7a5" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Secondary action
            </span>
        
    </span> </a>
        </div>
    
    </dialog>
        <!-- modal.blade.php -->
<dialog class="c-modal c-modal--is-panel c-modal--slide-up c-modal--padding-2 c-modal--overlay-light" aria-labelledby="modal__label__modal-panel" aria-modal="true" role="dialog" id="modal-panel" data-uid="69f0d0f92b94a" data-component="modal">

    <div class="c-modal__header">
                        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-modal__heading c-typography__variant--h2" tabindex="1" id="modal__label__modal-panel" data-uid="69f0d0f92b989" data-component="typography">
    Example modal panel
</h2>                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="69f0d0f92b9be" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92b9f1" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <div class="c-modal__content" tabindex="2">

        
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        
            </div>

            <div class="c-modal__footer">
            <a class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Action" data-uid="69f0d0f92b8d1" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Action
            </span>
        
    </span> </a>                <a class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Secondary action" data-uid="69f0d0f92b90a" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Secondary action
            </span>
        
    </span> </a>
        </div>
    
    </dialog>

@php
    $modals = [
        'standard' => [
            'isPanel' => false,
            'overlay' => 'light',
            'navigation' => true,
        ],
        'small' => [
            'size' => 'sm',
            'padding' => 2,
            'borderRadius' => 'lg',
        ],
        'medium' => [
            'size' => 'md',
            'padding' => 3,
            'borderRadius' => 'md',
        ],
        'large' => [
            'size' => 'lg',
            'padding' => 4,
            'borderRadius' => 'sm',
        ],
        'panel' => [
            'isPanel' => true,
            'animation' => 'slide-up',
            'padding' => 2,
        ],
    ];
@endphp

<div style="display: grid; gap: 16px; justify-content: start;  grid-template-columns: 1fr 1fr;">
    @foreach ($modals as $key => $modal)
        @button([
            'href' => '',
            'type' => 'filled',
            'text' => 'Open ' . $key . ' modal',
            'icon' => 'favorite',
            'size' => 'md',
            'color' => 'secondary',
            'classList' => ['open-modal', 'u-margin__left--0'],
            'attributeList' => ['data-open' => 'modal-' . $key],
        ])
        @endbutton
    @endforeach
</div>


@foreach ($modals as $key => $modal)
    @modal(
        array_merge(
            [
                'closeButtonText' => 'Close',
                'heading' => 'Example modal ' . $key,
                'id' => 'modal-' . $key
            ],
            (array) $modal
        )
    )
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Nullam
        quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
        nibh, ut fermentum massa justo sit amet risus.

        @slot('bottom')
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Action',
                'size' => 'md',
                'color' => 'primary',
            ])
            @endbutton
            @button([
                'href' => '#',
                'type' => 'filled',
                'text' => 'Secondary action',
                'size' => 'md',
                'color' => 'secondary',
            ])
            @endbutton
        @endslot
    @endmodal
@endforeach

Modal with navigation

Click any thumbnail to open the gallery modal. Previous and next arrows cycle through images.

<div style="display: flex; gap: 8px;">
                <!-- image.blade.php -->
    <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/10/800/600" data-stepping="0" data-caption="Forest path" style="cursor: pointer; width: 150px;" data-uid="69f0d0f92be5f" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/10/400/300" 
    alt="Forest path"
    
></div>                        </figure>

                <!-- image.blade.php -->
    <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/20/800/600" data-stepping="1" data-caption="Mountain lake" style="cursor: pointer; width: 150px;" data-uid="69f0d0f92bf10" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/20/400/300" 
    alt="Mountain lake"
    
></div>                        </figure>

                <!-- image.blade.php -->
    <figure class="c-image" data-open="modal-navigation" data-large-img="https://picsum.photos/id/30/800/600" data-stepping="2" data-caption="Coastal view" style="cursor: pointer; width: 150px;" data-uid="69f0d0f92bf7c" data-component="image">
         
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://picsum.photos/id/30/400/300" 
    alt="Coastal view"
    
></div>                        </figure>

    </div>

    <!-- modal.blade.php -->
<dialog class="c-modal c-modal--gallery c-modal--is-modal c-modal--slide-up c-modal--padding-3 c-modal--transparent c-modal--overlay-light" aria-labelledby="modal__label__modal-navigation" aria-modal="true" role="dialog" id="modal-navigation" data-uid="69f0d0f92c07a" data-component="modal">

    <div class="c-modal__header">
                        <button class="c-button c-modal__close c-button__basic c-button__basic--default c-button--lg" data-close="" type="button" aria-label="Close" data-uid="69f0d0f92c0b4" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92c0eb" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Close
            </span>
        
    </span> </button>    </div>

    <div class="c-modal__content" tabindex="2">

        
                        <button class="c-button c-modal__prev c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-prev="" type="button" aria-label="Previous image" data-uid="69f0d0f92c158" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-left c-icon--material c-icon--material-chevron_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92c18e" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>        
        <!-- image.blade.php -->
    <figure class="c-image c-image--is-placeholder c-image--is-placeholder" data-uid="69f0d0f92bfe5" data-component="image">
                    <div class="c-image__placeholder" aria-label="">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" data-material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0f92c037" data-component="icon">
                    </span>
          </div>
            </figure>

        
                        <button class="c-button c-modal__next c-button__basic c-button__basic--default c-button--lg c-button--icon-only" data-next="" type="button" aria-label="Next image" data-uid="69f0d0f92c1cf" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d0f92c202" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>            </div>

    
                <!-- steppers.blade.php -->
<div class="c-steppers c-steppers--type-dots" data-uid="69f0d0f92c238" data-component="steppers">
    
</div>    </dialog>

@php
    $navItems = [
        ['thumb' => 'https://picsum.photos/id/10/400/300',  'large' => 'https://picsum.photos/id/10/800/600',  'caption' => 'Forest path'],
        ['thumb' => 'https://picsum.photos/id/20/400/300',  'large' => 'https://picsum.photos/id/20/800/600',  'caption' => 'Mountain lake'],
        ['thumb' => 'https://picsum.photos/id/30/400/300',  'large' => 'https://picsum.photos/id/30/800/600',  'caption' => 'Coastal view'],
    ];
@endphp

<div style="display: flex; gap: 8px;">
    @foreach ($navItems as $i => $item)
        @image([
            'src' => $item['thumb'],
            'alt' => $item['caption'],
            'attributeList' => [
                'data-open'     => 'modal-navigation',
                'data-large-img' => $item['large'],
                'data-stepping' => $i,
                'data-caption'  => $item['caption'],
                'style'         => 'cursor: pointer; width: 150px;',
            ],
        ])
        @endimage
    @endforeach
</div>

@modal([
    'id'              => 'modal-navigation',
    'navigation'      => true,
    'transparent'     => true,
    'closeButtonText' => 'Close',
    'ariaLabels'      => (object) ['prev' => 'Previous image', 'next' => 'Next image'],
    'classList'       => ['c-modal--gallery'],
])
    @image(['src' => ''])
    @endimage
@endmodal

API

Parameter	Default	Description
heading		The title of the modal
slot		The main content of the modal
bottom		Extra slot at the bottom of the modal (below content)
overlay	light	-
isPanel	false	Removes padding, to enable a panel like behaviour. Cover whole page viewport.
id		A unique id which will be used to target the modal to open with the correct data-attr
animation	slide-up	Available animations: slide-up, slide-down, slide-left, slide-right.
navigation	false	Adds navigation arrows, to slide between stuff.
size		Empty as default is set to max width 800px. But you can use sm, md and lg
padding	3	Adds whitespace around the content. Value: 1 - 4
borderRadius	false	Rounded edges. Value: sm, md, lg
transparent	false	Transparent wrapper around the content
closeButtonText		Text for the close button. Default is empty

CSS API

Variable	Default	Type	Values	Description
--c-modal--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-modal--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-modal--border-width	var(--border-width)	range	-	Size
--c-modal--border-radius	var(--border-radius)	range	-	Border Radius
--c-modal--color--surface	var(--color--surface)	color	-	Surface
--c-modal--color--alpha	var(--color--alpha)	rgba	-	Used for overlays. Includes opacity — set both color and alpha together.
--c-modal--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-modal--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-modal--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-modal--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-modal--color--alpha-contrast	var(--color--alpha-contrast)	color	-	Used for text and icons on alpha overlays.
--c-modal--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-modal--font-size-500	var(--font-size-500)	range	-	Four steps above base in the type scale. Equivalent to h3.

Similar components

Gallery Modal Testimonials Code