# Enable/disable a button in Phoenix 1.7 depending on state

**URL:** <https://forum.devtalk.com/t/enable-disable-a-button-in-phoenix-1-7-depending-on-state/122793>\
**Category:** Frontend Questions/Help\
**Tags:** elixir, liveview, phoenix\
**Created:** [1 September 2023 08:59 UTC](https://forum.devtalk.com/t/enable-disable-a-button-in-phoenix-1-7-depending-on-state/122793 "2023-09-01T08:59:21Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Fl4m3Ph03n1x](https://forum.devtalk.com/user_avatar/forum.devtalk.com/fl4m3ph03n1x/32/3808_2.png) [@Fl4m3Ph03n1x](https://forum.devtalk.com/u/Fl4m3Ph03n1x)\
**Post date:** [4 September 2023 13:26 UTC](https://forum.devtalk.com/t/enable-disable-a-button-in-phoenix-1-7-depending-on-state/122793/2 "2023-09-04T13:26:55Z")

</div>

## Issues found

The main reason my code didn’t work was because my `disable_button?` function was returning `"false"` instead of `false`. To be more precise:

> So, in Phoenix LV, if the value is false the attribute disabled is removed from the node, while if it is any other thing (like `"false"`), the node gets the attribute as disabled=“something else”, which means that because disabled is still present, irrespective of value, it is considered as a disabled button.

This differs from the behaviour in the browser, where if I add `disable="false"` the browser will not consider the node disabled.

Source: [Enable/disable a button in Phoenix 1.7 depending on state - #6 by Fl4m3Ph03n1x - Questions / Help - Elixir Programming Language Forum](https://elixirforum.com/t/enable-disable-a-button-in-phoenix-1-7-depending-on-state/58007/6?u=fl4m3ph03n1x)

Another issue is that this function also needs to return a value that depends on the state itself. In this case I am generating a random number, which is independent of state, thus the button would never update.

## Answer

So, for those who are curious, this is the code I ended up with:

**`core_components.ex`**

This is my modified button function:

```auto
  @doc """
  Renders a button.

  ## Examples

      <.button>Send!</.button>
      <.button phx-click="go" class="ml-2" disabled=false>Send!</.button>
  """
  attr :type, :string, default: nil
  attr :class, :string, default: nil
  attr :disabled, :boolean, default: false
  attr :rest, :global, include: ~w(form name value)

  slot :inner_block, required: true

  def button(assigns) do
    ~H"""
    <button
      type={@type}
      class={if @disabled do
      [
        "rounded-md bg-slate-400 px-3 py-2 text-sm font-semibold text-white shadow-sm",
        @class
      ]
    else
      [
        "phx-submit-loading:opacity-75 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm",
        "hover:bg-indigo-500 active:text-white/80",
        @class
      ]
    end}
      {@rest}
      disabled={@disabled}
    >
      <%= render_slot(@inner_block) %>
    </button>
    """
  end

```

And here is how I use it:

**`my_app_live.html.heex`**

```auto
<.button class="min-w-full" disabled={disable_button?(@param1, @state)}>Execute Command</.button>

```

This depends on the state, because the state changes with time, which means my button’s appearance will also change with time!

---

_[View the full topic](https://forum.devtalk.com/t/enable-disable-a-button-in-phoenix-1-7-depending-on-state/122793)._