Components

Add To Cart

A stateful add-to-cart button that animates idle → adding → added.

php artisan blatui:add add-to-cart

<x-ui.add-to-cart />

Icon Only

{{-- Hide the label with :label="false" and give the button an accessible name. --}}
<x-ui.add-to-cart :label="false" size="icon" aria-label="Add to cart" />

Sizes

<div class="flex flex-wrap items-center gap-3">
    <x-ui.add-to-cart size="sm" />
    <x-ui.add-to-cart />
    <x-ui.add-to-cart size="lg" />
</div>

API Reference

Props, slots and exposed methods for <x-ui.add-to-cart>.

Props

Prop	Type	Default	Description
`label`	`string\|bool`	`'Add to cart'`	The idle button text. Pass false for an icon-only button (combine with an aria-label and size="icon"). The default slot, when filled, overrides this.
`addedLabel`	`string`	`'Added'`	The text shown briefly in the success state after the item is added.
`size`	`string`	`'default'`	Button size, mirroring the button component. Use an icon-* size together with :label="false" for a compact icon-only button. `default` `sm` `lg` `icon` `icon-sm` `icon-lg`
`icon`	`string`	`'shopping-cart'`	The Lucide icon name shown in the idle state (without the "lucide-" prefix).

Slots

Slot	Description
`default`	Optional custom label content for the idle state. When provided, it replaces the label prop text.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`add()`	Triggers the idle to adding transition. The demo simulates a request with a timeout; replace it with your own request and call done() or reset() when it resolves.
`done()`	Switches to the success ("added") state, then auto-resets to idle. Call this when your request succeeds.
`reset()`	Returns the button to the idle state. Call this when your request fails.