Info State

Informational state.

html

<div class="info-state" role="status" aria-live="polite">
  <span class="info-state__icon info-state__icon--info" aria-hidden="true"></span>
  <div class="info-state__body">
    <p class="info-state__title">Beta feature</p>
    <p class="info-state__message">This dashboard is in beta and may change without notice.</p>
  </div>
  
</div>
<style>
.info-state { display: flex; align-items: flex-start; gap: 10px; max-width: 380px; padding: 12px 14px;
  border-radius: 10px; background: color-mix(in srgb, #BFD9F2 35%, #FAF7F2); box-sizing: border-box; font: 13.5px/1.45 system-ui, sans-serif; color: #241430; }
.info-state__icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: #2F6FA8; color: #FAF7F2;
  display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; }
.info-state__icon--info::before { content: "i"; }
.info-state__icon--tip::before { content: "★"; }
.info-state__icon--note::before { content: "✎"; }
.info-state__body { flex: 1; }
.info-state__title { margin: 0 0 2px; font-weight: 700; }
.info-state__message { margin: 0; color: #241430b3; }
.info-state__close { border: none; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; color: #241430; padding: 2px; }
.info-state__close:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div role="status" aria-live="polite" class="info-tw info-tw--info flex items-start gap-2.5 max-w-sm px-3.5 py-3 rounded-lg box-border font-sans text-[13.5px] text-[#241430]" style="background:color-mix(in srgb, #BFD9F2 35%, #FAF7F2)">
  <span class="info-tw__icon w-5 h-5 rounded-full flex-shrink-0 bg-[#2F6FA8] text-[#FAF7F2] grid place-items-center text-[11px] font-bold" aria-hidden="true"></span>
  <div class="flex-1">
    <p class="m-0 mb-0.5 font-bold">Beta feature</p>
    <p class="m-0 text-[#241430]/70">This dashboard is in beta and may change without notice.</p>
  </div>
  
</div>
<style>
.info-tw--info .info-tw__icon::before { content: "i"; }
.info-tw--tip .info-tw__icon::before { content: "★"; }
.info-tw--note .info-tw__icon::before { content: "✎"; }
</style>

react

export function InfoState({
  title = "Beta feature",
  message = "This dashboard is in beta and may change without notice.",
  icon = "info",
  dismissible = false,
}) {
  const glyph = { info: "i", tip: "★", note: "✎" }[icon] ?? "i";
  return (
    <div role="status" aria-live="polite" style={{ display: "flex", alignItems: "flex-start", gap: 10, maxWidth: 380,
      padding: "12px 14px", borderRadius: 10, background: "color-mix(in srgb, #BFD9F2 35%, #FAF7F2)",
      boxSizing: "border-box", font: "13.5px/1.45 system-ui, sans-serif", color: "#241430" }}>
      <span aria-hidden="true" style={{ width: 20, height: 20, borderRadius: "50%", flexShrink: 0, background: "#2F6FA8",
        color: "#FAF7F2", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700 }}>{glyph}</span>
      <div style={{ flex: 1 }}>
        <p style={{ margin: "0 0 2px", fontWeight: 700 }}>{title}</p>
        <p style={{ margin: 0, color: "#241430b3" }}>{message}</p>
      </div>
      {dismissible && (
        <button type="button" aria-label={`Dismiss ${title}`} style={{ border: "none", background: "transparent",
          fontSize: 15, cursor: "pointer", color: "#241430", padding: 2 }}>×</button>
      )}
    </div>
  );
}