Dynamic Class Binding in Svelte

In the previous lesson, you learned about scoped, component, and global styles in Svelte, which are essential for creating clean and maintainable user interfaces. Now, we’ll take styling a step further by introducing dynamic class binding. This technique allows you to apply or remove CSS classes based on the state of your application, making your components more interactive and visually dynamic.

Dynamic class binding is particularly useful when you want to change the appearance of an element in response to user actions, such as clicking a button or hovering over an element. In Svelte 5, this is achieved using the $state rune for reactivity and event handlers like onclick, onmouseenter, and onmouseleave. By the end of this lesson, you’ll understand how to use these tools to create components that respond to user interactions with smooth and engaging visual changes.

Let’s start by exploring how to bind a class to a state variable in Svelte. In Svelte 5, reactivity is handled using the $state rune, which replaces older patterns like stores and $:. Here’s a simple example where we toggle a class (active) on a button when it’s clicked:

<script>
  let active = $state(false);
</script>

<button class={["btn", { active }]} onclick={() => active = !active}>
  Toggle Active State
</button>

<style>
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #ddd;
    cursor: pointer;
  }

  .btn.active {
    background-color: #007bff;
    color: white;
  }
</style>

In this example:

• We define a state variable active using $state(false), which initializes to false.
• The class attribute of the button uses an array to combine the static class btn with the conditional class active. When active is true, the active class is applied.
• The onclick event handler toggles the value of active between true and false.

When you click the button, it will toggle between the default and active styles, changing the background color to blue and the text color to white.

Sometimes, you’ll want to apply multiple classes conditionally based on different states. For example, you might want to highlight a button when the user hovers over it while also toggling an active state. Here’s how you can achieve this:

<script>
  let active = $state(false);
  let highlighted = $state(false);
</script>

<button
  class={["btn", { active, highlighted }]}
  onclick={() => active = !active}
  onmouseenter={() => highlighted = true}
  onmouseleave={() => highlighted = false}
>
  Toggle Active State
</button>

<style>
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #ddd;
    cursor: pointer;
  }

  .btn.active {
    background-color: #007bff;
    color: white;
  }

  .btn.highlighted {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
  }
</style>

In this example:

• We introduce a second state variable highlighted to track whether the button is being hovered over.
• The class attribute now includes both active and highlighted classes, which are applied conditionally based on their respective state variables.
• The onmouseenter and onmouseleave event handlers update the highlighted state when the user hovers over or leaves the button.

When you hover over the button, it will gain a subtle box shadow, and clicking it will toggle the active state, changing its background color.