SState

<SState> is a badge that indicates the state of the object.

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

StateStateStateStateStateState

Overview

Use this component to indicate the state of the object. For example, <SState> can be used to note certain object's status, such as "Open", "In progress", "Completed", etc.

Difference from <SPill>

The <SState> is different from <SPill> where <SPill> should be used to list certain types of items for the object, but <SState> is used to indicate the "State" of the object.

For example, <SState> should be used for things like "Status" (Open, In progress, Completed, etc.).

<SPill> on the other hand should be used for things like "Tag" (List of available items, User's roles, etc.)

Import

import SState from '@globalbrain/sefirot/lib/components/SState.vue'

Usage

Import <SState> component and set :mode and :label.

<SState mode="success" label="Completed" />

Props

:as

Defines the HTML tag for the pill. Any value passed to this prop will used as <component :is="as">.

interface Props {
  // @default 'span'
  as?: string
}

<SState as="div" label="State" />

:size

Defines the size of the component.

interface Props {
  // @default 'small'
  size?: 'mini' | 'small' | 'medium' | 'large'
}

<SState size="small" label="State" />

:mode

Defines the color of the state.

interface Props {
  // @default 'default'
  mode?: Mode
}

type Mode =
  | 'default'
  | 'mute'
  | 'neutral'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'

<SState mode="neutral" label="State" />

:label

Defines the label text of the state.

interface Props {
  label: string
}

<SState label="State" />