Add the styled buttons for the forms.

lib/decentralised_book_index_web/components/my_components.ex

@@ -7,6 +7,10 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents do
       import MyComponents.AuthorSearch, only: [author_search: 1]
 
       import MyComponents.Pagination, only: [pagination: 1]
+      import MyComponents.Buttons, only: [
+        success_button: 1,
+        primary_button: 1,
+      ]
     end
   end
 end

lib/decentralised_book_index_web/components/my_components/buttons.ex

@@ -0,0 +1,65 @@
+defmodule DecentralisedBookIndexWeb.Components.MyComponents.Buttons do
+  use Phoenix.Component
+
+  import DecentralisedBookIndexWeb.CoreComponents
+
+  @doc """
+  Renders a success button.
+
+  ## Examples
+
+      <.success_button>Send!</.success_button>
+      <.success_button phx-click="go" class="ml-2">Send!</.success_button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def success_button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        @class
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+
+  @doc """
+  Renders a primary button.
+
+  ## Examples
+
+      <.primary_button>Send!</.primary_button>
+      <.primary_button phx-click="go" class="ml-2">Send!</.primary_button>
+  """
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
+
+  slot :inner_block, required: true
+
+  def primary_button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        "phx-submit-loading:opacity-75 rounded-lg py-2 px-3 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800 me-auto",
+        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        @class
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+end

lib/decentralised_book_index_web/live/author_live/form_component.ex

@@ -47,8 +47,12 @@ defmodule DecentralisedBookIndexWeb.AuthorLive.FormComponent do
         <% end %>
 
         <:actions>
-          <.button phx-disable-with="Saving...">Save Author</.button>
+          <.success_button phx-disable-with="Saving...">
-          <.button phx-click="cancel" phx-target={@myself} class="me-auto">Cancel</.button>
+            Save Author
+          </.success_button>
+          <.primary_button phx-click="cancel" phx-target={@myself}>
+            Cancel
+          </.primary_button>
         </:actions>
       </.simple_form>
     </div>