Sefirot

Appearance

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 ​

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

Usage ​

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

template
<SState mode="success" label="Completed" />
<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">.

ts
interface Props {
  // @default 'span'
  as?: string
}
interface Props {
  // @default 'span'
  as?: string
}
template
<SState as="div" label="State" />
<SState as="div" label="State" />

:size ​

Defines the size of the component.

ts
interface Props {
  // @default 'small'
  size?: 'mini' | 'small' | 'medium' | 'large'
}
interface Props {
  // @default 'small'
  size?: 'mini' | 'small' | 'medium' | 'large'
}
template
<SState size="small" label="State" />
<SState size="small" label="State" />

:mode ​

Defines the color of the state.

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

type Mode =
  | 'default'
  | 'mute'
  | 'neutral'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
interface Props {
  // @default 'default'
  mode?: Mode
}

type Mode =
  | 'default'
  | 'mute'
  | 'neutral'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
template
<SState mode="neutral" label="State" />
<SState mode="neutral" label="State" />

:label ​

Defines the label text of the state.

ts
interface Props {
  label: string
}
interface Props {
  label: string
}
template
<SState label="State" />
<SState label="State" />