Offline

Required network service unavailable.

Offline
You're offline — changes will sync when you reconnect.

html

<div class="off-demo">
  <div class="off-dot off-dot--offline" style="--accent:#E8A020;"><span class="off-dot__mark"></span>Offline</div>
  
  <div class="off-banner" style="--accent:#E8A020;border-radius:10px;" role="status">
    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 3 18 18M8.5 8.5A9 9 0 0 0 3.6 11M12 19h.01M16.5 13a9 9 0 0 1 2 1.4M20.4 11a9 9 0 0 0-2-1.6M6 15a9 9 0 0 1 3.3-2.1" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <span>You&#39;re offline — changes will sync when you reconnect.</span>
  </div>
  
</div>
<style>
.off-demo { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; }
.off-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #241430888; margin-bottom: 10px; }
.off-dot__mark { width: 8px; height: 8px; border-radius: 50%; background: #A8E6C1; }
.off-dot--offline { color: var(--accent); }
.off-dot--offline .off-dot__mark { background: var(--accent); }
.off-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 12%, #FAF7F2); color: var(--accent); font-weight: 600; font-size: 12px; }
</style>

tailwind

<div class="w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl">
  <div class="inline-flex items-center gap-1.5 text-xs font-bold mb-2.5" style="color:#E8A020">
    <span class="w-2 h-2 rounded-full" style="background:#E8A020"></span>Offline
  </div>
  
  <div role="status" class="flex items-center gap-2 px-3 py-2.5 font-semibold text-xs" style="background:color-mix(in srgb, #E8A020 12%, #FAF7F2);color:#E8A020;border-radius:10px;">
    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 3 18 18M8.5 8.5A9 9 0 0 0 3.6 11M12 19h.01M16.5 13a9 9 0 0 1 2 1.4M20.4 11a9 9 0 0 0-2-1.6M6 15a9 9 0 0 1 3.3-2.1" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <span>You&#39;re offline — changes will sync when you reconnect.</span>
  </div>
  
</div>

react

export function OfflineState({
  message = "You&#39;re offline — changes will sync when you reconnect.",
  accent = "#E8A020",
  force = true,
  radius = 10,
}) {
  return (
    <div style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12 }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 700, color: force ? accent : "#241430888", marginBottom: 10 }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: force ? accent : "#A8E6C1" }} />
        {force ? "Offline" : "Online"}
      </div>
      {force && (
        <div role="status" style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", borderRadius: radius, background: `color-mix(in srgb, ${accent} 12%, #FAF7F2)`, color: accent, fontWeight: 600, fontSize: 12 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 3 18 18M8.5 8.5A9 9 0 0 0 3.6 11M12 19h.01M16.5 13a9 9 0 0 1 2 1.4M20.4 11a9 9 0 0 0-2-1.6M6 15a9 9 0 0 1 3.3-2.1" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          <span>{message}</span>
        </div>
      )}
    </div>
  );
}