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.
Ready to get started?
Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.