Aurora.Uix.Templates.Basic.ConfirmButton (Aurora UIX v0.1.4-rc.2)

Copy Markdown

A LiveComponent that provides a button with a confirmation modal dialog.

This component displays an action button that, when clicked, shows a modal dialog asking for user confirmation before executing the specified event. It handles the complete confirmation flow including showing/hiding the modal and forwarding the confirmed event to the appropriate target.

Features

  • Customizable button and modal content via slots
  • Configurable event targets (self or parent LiveView)
  • Internationalized default messages for confirmation dialogs
  • Custom CSS classes for all interactive elements
  • Integrated with Phoenix.LiveView.JS for smooth modal interactions

Required Assigns

  • :id - Unique identifier for the component
  • :value - Value to be passed with the confirmed event
  • :event - Event name to trigger when user confirms the action

Optional Assigns

  • :content - Slot for the button's display content
  • :confirm_message - Slot for the confirmation question text
  • :accept_message - Slot for the accept button label
  • :cancel_message - Slot for the cancel button label
  • :target - Event target (defaults to :myself)
  • :class - CSS class for the main button (defaults to "auix-confirm-button--show-action")
  • :accept_button_class - CSS class for accept button (defaults to "auix-confirm-button--accept-action")
  • :cancel_button_class - CSS class for cancel button (defaults to "auix-confirm-button--cancel-action")

Example

<.live_component
  module={Aurora.Uix.Templates.Basic.ConfirmButton}
  id="delete-user-btn"
  event="delete_user"
  value={%{user_id: @user.id}}
  target={@myself}
>
  <:content>Delete User</:content>
  <:confirm_message>
    Are you sure you want to delete this user? This action cannot be
    undone.
  </:confirm_message>
  <:accept_message>Delete</:accept_message>
  <:cancel_message>Cancel</:cancel_message>
</.live_component>