Evaluate conditional inside attribute in heex

One way you could write this is:
<div class={“#{if @published, do: "bg-green", else: "bg-red"} text-white text-small border-grey"}>...</div>

Although there may be a clearer way.

Another way to do this:

<div class={["text-white", "text-small", "border-grey"] ++ [(if @published, do: "bg-green", else: "bg-red")]}>...</div>

That is, using a list instead of string interpolation. This is however neither more concise nor better than @axelson’s solution, it’s just different. It may appeal to you if you prefer to use a list for your classes.

A more elegant way would be if LV allowed things like this:

<div class={%{"bg-green": @published, "bg-red": !@published, "text-small": true ...}}>...</div>

Like some front-end frameworks (e.g. Vuejs) already do. I was told that Surface supports this notation, though I haven’t tested it. I’m sure that LiveView will catch up at some point

Great, thanks so much @axelson and @trisolaran , both approaches are big improvements. Thanks again!

You can join strings:

<div class={"text-white text-small border-grey " <> if @published, do: "bg-green", else: "bg-red"}>...</div>

Note the space after “border-gray”

Depending on your use case you could also do this…

<div data-published={@published} class="bg-gray-500 data-[published]:bg-green-500"></div>