Class directives

Learn how to conditionally set CSS classes using the class attribute with objects and arrays, or the class directive in Svelte

Svelte provides two ways to set classes on elements: the class attribute and the class: directive.

Class Attribute

Primitive values are treated like any other attribute:

<div class={large ? 'large' : 'small'}>...</div>

For historical reasons, falsy values (like false and NaN) are stringified (class="false"), though class={undefined} (or null) causes the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause class to be omitted.

Objects and Arrays

Since Svelte 5.16, class can be an object or array, converted to a string using clsx.

Object Form

If the value is an object, the truthy keys are added:

<script>
	let { cool } = $props();
</script>

<!-- results in class="cool" if cool is truthy,
     class="lame" otherwise -->
<div class={{ cool, lame: !cool }}>...</div>

Array Form

If the value is an array, the truthy values are combined:

<!-- if faded and large are both truthy, results in
     class="saturate-0 opacity-50 scale-200" -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

Whether using the array or object form, you can set multiple classes simultaneously with a single condition, which is particularly useful with utility-first CSS frameworks like Tailwind.

Composing Classes

Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props:

<!--- file: Button.svelte --->
<script>
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>

The user of this component has the same flexibility to use a mixture of objects, arrays and strings:

<!--- file: App.svelte --->
<script>
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accept the inevitability of Tailwind
</Button>

ClassValue Type

Since Svelte 5.19, Svelte exposes the ClassValue type for type-safe class names in component props:

<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	const props: { class: ClassValue } = $props();
</script>

<div class={['original', props.class]}>...</div>

The class: Directive

Prior to Svelte 5.16, the class: directive was the most convenient way to set classes conditionally.

<!-- These are equivalent -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>

Shorthand

As with other directives, you can use a shorthand when the name of the class coincides with the value:

<div class:cool class:lame={!cool}>...</div>

Unless you’re using an older version of Svelte, consider avoiding class:, since the attribute is more powerful and composable.

Practical Examples

Toggle Button States

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

<button 
	class={{ active, inactive: !active }}
	onclick={() => active = !active}
>
	{active ? 'Active' : 'Inactive'}
</button>

<style>
	.active {
		background: green;
		color: white;
	}
	.inactive {
		background: gray;
		color: black;
	}
</style>

Combining Multiple Conditions

<script>
	let loading = $state(false);
	let error = $state(false);
	let success = $state(false);
</script>

<div class={{ loading, error, success, ready: !loading }}>
	Status indicator
</div>

With Tailwind CSS

<script>
	let emphasized = $state(false);
	let large = $state(true);
</script>

<div class={[
	'p-4 rounded',
	emphasized && 'font-bold text-blue-600',
	large && 'text-2xl'
]}>Dynamic styling</div>