Corepine logo Corepine Modal
Modal v0.1x latest

Blade Components

Corepine Modal ships Blade components for host setup, rendering, and actions.

Use these components when you want to place the modal host in your layout, render a standalone Blade modal, or customize the shell around modal content. Most applications only need the global assets component at first; the other components are useful as your modal UI becomes more tailored.

Core Components

  • <x-corepine.modal.assets />: renders the global host and supporting assets
  • <x-corepine.modal />: standalone modal definition (no Livewire modal class required)
  • <x-corepine.modal.layout />: shell layout helper for custom composition when you want to own the modal structure
  • <x-corepine.modal.footer />: shell footer rendering helper

If <x-corepine.modal.layout /> receives submit attributes such as wire:submit or x-on:submit, it automatically renders its outer wrapper as a form.

Standalone Slots

  • x-slot:header: overrides built-in standalone header (heading/description/showClose)
  • x-slot:footer: renders custom standalone footer, including richer content such as inputs or composed actions

Layout Slots

  • x-slot:header on <x-corepine.modal.layout />: overrides built-in layout header (heading/description/showClose)
  • x-slot:footer on <x-corepine.modal.layout />: renders a composed footer area

If the layout header slot exists, the layout component ignores heading, description, and showClose.

If no header slot is provided, the built-in close icon is auto-shown only when the built-in header has a heading or description. Use showClose="true" if you want the control without header text.

In Livewire stack mode, child modals render that built-in header control as a chevron Back button when stackedBackButton is enabled. Child layers inherit the parent value unless they set their own value. Root modals render the normal close icon.

Action Components

  • <x-corepine.modal.actions.open />: declarative open trigger wrapper
  • <x-corepine.modal.actions.close />: declarative close trigger wrapper

Use declarative actions when you only need footer buttons.

Use x-slot:footer or <x-corepine.modal.footer /> when the footer needs arbitrary UI such as:

  • comment inputs
  • upload controls
  • helper text
  • mixed button and form layouts

Keep the shell enabled for those cases unless you need full manual modal chrome.

Example: Open Wrapper

<x-corepine.modal.actions.open component="modals.edit-user" :arguments="['user' => $user->id]">
    <button type="button">Edit</button>
</x-corepine.modal.actions.open>

<x-corepine.modal.actions.open modal-id="user-sheet">
    <button type="button">Open Sheet</button>
</x-corepine.modal.actions.open>

Example: Close Wrapper

<x-corepine.modal.actions.close
    layers="1"
    :destroy="true"
    :dispatch="['users-refreshed' => ['user' => $user->id]]"
    :dispatch-to="['orders.table' => ['sync-user' => ['user' => $user->id]]]"
>
    Close
</x-corepine.modal.actions.close>

dispatch fires regular follow-up events after close.

dispatchTo fires targeted Livewire events after close.

Use modal-id on open/close helpers when you want to target a standalone modal by id.

Continue