Corepine logo Corepine Documentation
Modal v0.1x latest

Blade Components

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

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 now auto-shown only when the built-in header has a heading or description. Use showClose="true" if you want the close icon without header text.

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