Livewire

Have you imported the On class ?

use Livewire\Attributes\On; 

Can you show all the code of the component ?

app/Livewire/Classes/ClassCreate.php

<?php

namespace App\Livewire\Classes;

use Livewire\Component;
use Livewire\Attributes\On;
use App\Livewire\Forms\ClassForm;

class ClassCreate extends Component
{
    public ClassForm $form;
    public $departments;
    public $showModal = false;

    #[On('open-create-class-modal')]
    public function openModal()
    {
        $this->showModal = true;
    }

    public function mount()
    {
        $this->departments = \App\Models\Department::all();
    }
    public function createClass()
    {
        $this->form->store();

        session()->flash('flash', ['type' => 'success', 'message' => 'Class created!']);
    }

    public function render()
    {
        return view('livewire.classes.class-create');
    }
}

Are you sure that x-button.button component binding all attributes?

yes

@props(['variant' => 'default', 'size' => 'default', 'disabled' => false])

@php
$baseClasses = 'inline-flex items-center justify-center rounded-md font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 uppercase text-xs tracking-widest focus:outline-none transition ease-in-out duration-150';

$variantClasses = [
        'default' => 'bg-indigo-800 dark:bg-indigo-500 text-white dark:text-white hover:bg-indigo-700 dark:hover:bg-indigo-400 hover:dark:text-white focus:bg-indigo-700 dark:focus:bg-indigo-600 active:bg-indigo-900 dark:active:bg-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-800',
        'secondary' => 'bg-gray-800 dark:bg-gray-200 border border-gray-300 dark:border-gray-500 text-gray-300 dark:text-gray-700 shadow-sm hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-2',
        'outline' => 'border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 focus:bg-gray-200 dark:focus:bg-gray-600 active:bg-gray-300 dark:active:bg-gray-300 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
        'ghost' => 'bg-transparent text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 focus:bg-gray-200 dark:focus:bg-gray-600 active:bg-gray-300 dark:active:bg-gray-300 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
        'danger' => 'bg-red-600 text-white hover:bg-red-500 focus:bg-red-500 active:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
        'link' => 'text-blue-500 hover:underline focus:underline active:text-blue-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
    ];


$sizeClasses = [
    'default' => 'h-10 px-4 py-2',
    'sm' => 'h-9 rounded-md px-3',
    'lg' => 'h-11 rounded-md px-8',
    'icon' => 'h-10 w-10',
];

$variantClass = isset($variantClasses[$variant]) ? $variantClasses[$variant] : $variantClasses['default'];
$sizeClass = isset($sizeClasses[$size]) ? $sizeClasses[$size] : $sizeClasses['default'];

$classes = "{$baseClasses} {$variantClass} {$sizeClass}";

if ($disabled) {
    $classes .= ' disabled:pointer-events-none disabled:opacity-50';
}
@endphp

<button {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</button>

Thank you for your help! I finally got the modal to pop up by switching from dispatching the event from the blade template to dispatching the event to the component.

// app/Livewire/Classes/ClassIndex.php
public function showModal()
{
    $this->dispatch('open-create-class-modal')->to(ClassCreate::class);
}

// app/Livewire/Classes/ClassIndex.php
#[On('open-create-class-modal')]
public function openModal()
{
    $this->showModal = true;
}

// resources/views/livewire/classes/class-create.blade.php
<x-button.button wire:click='showModal'>
 {{ __('Create Class') }}
 </x-button.button>