Status

The Status component displays a visual status indicator with customizable colors, sizes, and shapes.

Demo

React
Vue

Size

Variant

Neutral

Primary

Secondary

Success

Warning

Danger

Example

React
Vue

// Import component
import { Status } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/status.css';

return (
  <Status
    colorScheme="success"
    size="md"
    variant="circle"
  >
    Online
  </Status>
);

<script setup lang="ts">
// Import component
import { Status } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/status.css';
</script>

<template>
  <Status
    color-scheme="success"
    size="md"
    variant="circle"
  >
    Online
  </Status>
</template>

Props

Status.Root Props

React
Vue

Name	Type	Default	Description
`colorScheme`	`ColorScheme`	`neutral`	Color scheme for the status
`size`	`Size`	`md`	Size of the status indicator
`variant`	`StatusVariant`	`circle`	Shape of the status indicator

Name	Type	Default	Description
`color-scheme`	`ColorScheme`	`neutral`	Color scheme for the status
`size`	`Size`	`md`	Size of the status indicator
`variant`	`StatusVariant`	`circle`	Shape of the status indicator

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type StatusVariant = 'circle' | 'square' | 'triangle'