Conditional class names in Phoenix LiveView


What is the best way to have conditional classes in leex/eex templates? I’m looking for something similar to classnames in the JS community.

I’ve found the rzane/classnames package, however it doesn’t seem to be too popular, and hasn’t been updated in years. Is there a better way?

I have a component that should have a base class of my-component, and conditionally add the loading class name if @loading, otherwise add a not-loading classname.


What kind of updates do you expect from this library? It provides only 1 relatively simple function and it just works.

The library itself is not a problem, I simply wasn’t sure if this was the idiomatic way to solve the problem.

I found the answer while going through Surface documentation:

In order to avoid working with string concatenation, which is annoying and error-prone, Surface allows passing keyword lists directly to the class property and improves developer experience by automatically handling conditional classes.

<button class={"button", "is-info", "is-loading": @loading, "is-rounded": @rounded} >
  <#slot />
1 Like