Steps

Steps are progress indicators of a sequence of task steps.

Add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.

Step 1
Step 2
Step 3
Step 4
Step 5

active

length

<script>
    import { Steps } from 'svelte-spectre'

    let steps = [
        {label: 'Step 1', href: '#', tooltip: 'tooltip'},
        {label: 'Step 2', href: '#', tooltip: 'tooltip'},
        {label: 'Step 3', href: '#', tooltip: 'tooltip'},
        {label: 'Step 4', href: '#', tooltip: 'tooltip'},
        {label: 'Step 5', href: '#', tooltip: 'tooltip'},
    ],
    active = 3
</script>

<Steps {steps} bind:active />

Steps

API Steps