Before we start extending off our base button with our different styles, let’s first add interactivity so it’s not just a basic HTML button.

Event Propagation

First, let’s add x-data to the parent div of our button within our demonstration page. This will bind AlpineJS to the element, enabling Alpine state, events, etc. Meaning, we can also add a click handler to it.

// resources/views/pages/components/buttons.edge

@layout.app({ title: request.params().name })

  <h3 class="font-bold">Base Button</h3>
  <div 
++    x-data 
++    @click="console.log('clicked')" 
    class="mb-8 space-x-3 space-y-3">
--  <div class="mb-8 space-x-3 space-y-3">
    @button()
      Base Button
    @end
  </div>

@end

Currently, this won’t do anything in terms of our actual button. However, if we add x-data to our button as well, we’ll see that AlpineJS propagates the click even from our button, up to our parent div’s click handler.