Skip to main content
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>