> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/sveltejs/svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

```svelte theme={null}
<div class={large ? 'large' : 'small'}>...</div>
```

<Note>
  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.
</Note>

## Objects and Arrays

Since Svelte 5.16, `class` can be an object or array, converted to a string using [clsx](https://github.com/lukeed/clsx).

### Object Form

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

```svelte theme={null}
<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:

```svelte theme={null}
<!-- 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>
```

<Note>
  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.
</Note>

### Composing Classes

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

```svelte theme={null}
<!--- 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:

```svelte theme={null}
<!--- 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:

```svelte theme={null}
<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.

```svelte theme={null}
<!-- 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:

```svelte theme={null}
<div class:cool class:lame={!cool}>...</div>
```

<Note>
  Unless you're using an older version of Svelte, consider avoiding `class:`, since the attribute is more powerful and composable.
</Note>

## Practical Examples

### Toggle Button States

```svelte theme={null}
<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

```svelte theme={null}
<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

```svelte theme={null}
<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>
```