Conditional Classes with class:name

Snippet

Conditional Classes with class:name

The class:name directive provides a clean way to toggle CSS classes based on a condition. If the expression inside the braces is truthy, the class is added; otherwise, it is removed.

snippet.js

javascript

<script>
  let active = false;
</script>
 
<button 
  class:active={active} 
  on:click={() => active = !active}
>
  Toggle Status
</button>
 
<style>
  .active { color: red; font-weight: bold; }
</style>

svelte

Breakdown

class:active={active}

Applies the 'active' CSS class only if the 'active' variable is true.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Conditional Classes with class:name

Related