GUI Mellow
Palette
Colour theme
Components

Indicators

StatusDot

A coloured status with a message.

import { StatusDot } from "gui-mellow/StatusDot";

Service health

All systems operationalElevated latency in eu-westStorage node offline
Source of these examples
import { Stack } from "gui-mellow/Stack";
import { StatusDot } from "gui-mellow/StatusDot";
import { Example } from "../lib/Example";

export default function StatusDotDemo() {
  return (
    <Example title="Service health">
      <Stack gap={3}>
        <StatusDot pulse>All systems operational</StatusDot>
        <StatusDot tone="warning">Elevated latency in eu-west</StatusDot>
        <StatusDot tone="danger">Storage node offline</StatusDot>
      </Stack>
    </Example>
  );
}