✨ Working with PDFs, images or videos? Discover 145+ free web apps built for everyday tasks
Wensity

Marker

Five semantic variants — dot, pulse, numbered, icon, and status — for indicating live state, ordered position, or contextual meaning at a glance.

markerindicatorstatusdotpulsebadgeprimitivedashboard
Loading preview...

Examples

Practical examples and common states for the same installable component.

Dot

Minimal circular marker for simple indicators — presence, availability, or category color.

examples/marker-dot.tsx
import { Marker } from "@/components/wensity/marker";


export function DotMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="dot" tone="success" />
      <Marker variant="dot" tone="warning" />
      <Marker variant="dot" tone="danger" />
      <Marker variant="dot" tone="info" />
      <Marker variant="dot" tone="neutral" />
    </div>
  );
}

Pulse

Animated marker for live, active, or streaming states. Respects prefers-reduced-motion.

examples/marker-pulse.tsx
import { Marker } from "@/components/wensity/marker";


export function PulseMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="pulse" tone="success" />
      <Marker variant="pulse" tone="warning" />
      <Marker variant="pulse" tone="danger" />
    </div>
  );
}

Numbered

Displays ordered positions using numeric markers for steps, rankings, or lists.

examples/marker-numbered.tsx
import { Marker } from "@/components/wensity/marker";


export function NumberedMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="numbered" number={1} tone="brand" />
      <Marker variant="numbered" number={2} tone="brand" />
      <Marker variant="numbered" number={3} tone="brand" />
    </div>
  );
}

Icon

Uses contextual Tabler icons inside markers for semantic recognition at a glance.

examples/marker-icon.tsx
import { IconCheck, IconAlertTriangle, IconStar } from "@tabler/icons-react";
import { Marker } from "@/components/wensity/marker";


export function IconMarkers() {
  return (
    <div className="flex items-center gap-3">
      <Marker variant="icon" tone="success" icon={<IconCheck />} />
      <Marker variant="icon" tone="warning" icon={<IconAlertTriangle />} />
      <Marker variant="icon" tone="brand" icon={<IconStar />} />
    </div>
  );
}

Status

Represents states using semantic indicators paired with a label — online, away, offline, idle, syncing.

examples/marker-status.tsx
import { Marker } from "@/components/wensity/marker";


export function StatusMarkers() {
  return (
    <div className="flex items-center gap-5">
      <Marker variant="status" tone="success" label="Online" />
      <Marker variant="status" tone="warning" label="Away" />
      <Marker variant="status" tone="danger" label="Offline" />
    </div>
  );
}