SIndicator

<SIndicator> is used to display status or progress of an item or a task.

@globalbrain/sefirot/lib/components/SIndicator.vue

Usage

Import <SIndicator> component and define its state.

<script setup lang="ts">
import SIndicator from '@globalbrain/sefirot/lib/components/SIndicator.vue'
</script>

<template>
  <SIndicator state="running" />
</template>

Props

Here are the list of props you may pass to the component.

:state

The state of the indicator.

interface Props {
  state: State
}

type State =
  | 'pending'
  | 'ready'
  | 'queued'
  | 'running'
  | 'completed'
  | 'failed'

<SIndicator state="completed" />

:size

The size of the indicator. The default is 'medium'.

interface Props {
  size?: Size
}

type Size =
  | 'nano'
  | 'mini'
  | 'small'
  | 'medium'
  | 'large'
  | 'jumbo'

<SIndicator size="small" state="..." />

:mode

Whether the indicator should have colors or be monochrome. The default is 'colored'.

interface Props {
  mode?: Mode
}

type Mode =
  | 'colored'
  | 'monochrome'

<SIndicator mode="monochrome" state="..." />