Adding Interactivity to our Button

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.

@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

  

    

      Copied!
      

        

      
    
  
  
    
    
  


resources
views
pages
components
buttons.edge

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.