Tally UI

ConnectorStatus

Displays the connection state and sync info for an external service

Import

import { ConnectorStatus } from '@tallyui/components';

Usage

<ConnectorStatus
  name="WooCommerce"
  status="connected"
  lastSync="2 minutes ago"
/>

A compact status card showing a connector name, a color-coded status indicator dot with label, optional last-sync timestamp, and an error message when relevant.

Props

PropTypeDefaultDescription
namestringrequiredDisplay name of the connector
statusConnectionStatusrequiredCurrent connection state
lastSyncstring---Human-readable last sync time
errorstring---Error message shown in the error state
classNamestring---Override container styles

ConnectionStatus

type ConnectionStatus = 'connected' | 'disconnected' | 'syncing' | 'error';

Live demo

On this page