Security Warning

Security-related warning message.

html

<div class="secwarn" data-severity="Warning" role="alert">
  <span class="secwarn__icon" aria-hidden="true">!</span>
  <div class="secwarn__body">
    <p class="secwarn__heading">New sign-in detected</p>
    <p class="secwarn__detail">From Chrome on Windows • London, UK</p>
    <button type="button" class="secwarn__action">This wasn’t me</button>
  </div>
</div>
<style>
.secwarn { font: 14px/1.4 system-ui, sans-serif; color: #241430; width: 360px; padding: 14px 16px; border-radius: 10px; box-sizing: border-box; display: flex; gap: 12px; border: 1.5px solid; }
.secwarn__icon { flex: none; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.secwarn__heading { margin: 0; font-weight: 700; }
.secwarn__detail { margin: 4px 0 0; font-size: 12px; opacity: .8; }
.secwarn__action { margin-top: 10px; padding: 6px 12px; border-radius: 7px; border: 1.5px solid currentColor; background: none; font-weight: 700; font-size: 12px; cursor: pointer; color: inherit; }
.secwarn[data-severity="Info"] { background: #EAF3FB; border-color: #BFD9F2; }
.secwarn[data-severity="Info"] .secwarn__icon { background: #BFD9F2; color: #14263a; }
.secwarn[data-severity="Warning"] { background: #FDF3E2; border-color: #E8A020; }
.secwarn[data-severity="Warning"] .secwarn__icon { background: #E8A020; color: #241430; }
.secwarn[data-severity="Critical"] { background: #FBEAEA; border-color: #D64545; }
.secwarn[data-severity="Critical"] .secwarn__icon { background: #D64545; color: #FAF7F2; }
.secwarn__action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
</style>

tailwind

<div class="flex gap-3 w-[360px] p-[14px_16px] rounded-[10px] box-border border-[1.5px] font-sans text-sm text-[#241430] secwarn-tw" data-severity="Warning" role="alert">
  <span class="secwarn-tw-icon flex-none w-[22px] h-[22px] rounded-full flex items-center justify-center font-extrabold text-[13px]" aria-hidden="true">!</span>
  <div>
    <p class="m-0 font-bold">New sign-in detected</p>
    <p class="mt-1 mb-0 text-xs opacity-80">From Chrome on Windows • London, UK</p>
    <button type="button" class="mt-2.5 px-3 py-1.5 rounded-md border-[1.5px] border-current bg-none font-bold text-xs cursor-pointer text-inherit">This wasn’t me</button>
  </div>
</div>
<style>
.secwarn-tw[data-severity="Info"] { background: #EAF3FB; border-color: #BFD9F2; }
.secwarn-tw[data-severity="Info"] .secwarn-tw-icon { background: #BFD9F2; color: #14263a; }
.secwarn-tw[data-severity="Warning"] { background: #FDF3E2; border-color: #E8A020; }
.secwarn-tw[data-severity="Warning"] .secwarn-tw-icon { background: #E8A020; color: #241430; }
.secwarn-tw[data-severity="Critical"] { background: #FBEAEA; border-color: #D64545; }
.secwarn-tw[data-severity="Critical"] .secwarn-tw-icon { background: #D64545; color: #FAF7F2; }
</style>

react

export function SecurityWarning({
  heading = "New sign-in detected",
  detail = "From Chrome on Windows • London, UK",
  severity = "Warning",
  showAction = true,
}) {
  const theme = {
    Info: { bg: "#EAF3FB", border: "#BFD9F2", iconBg: "#BFD9F2", iconColor: "#14263a" },
    Warning: { bg: "#FDF3E2", border: "#E8A020", iconBg: "#E8A020", iconColor: "#241430" },
    Critical: { bg: "#FBEAEA", border: "#D64545", iconBg: "#D64545", iconColor: "#FAF7F2" },
  }[severity] ?? {};
  return (
    <div role="alert" style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", width: 360, padding: "14px 16px", borderRadius: 10, boxSizing: "border-box", display: "flex", gap: 12, border: `1.5px solid ${theme.border}`, background: theme.bg }}>
      <span aria-hidden="true" style={{ flex: "none", width: 22, height: 22, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 13, background: theme.iconBg, color: theme.iconColor }}>!</span>
      <div>
        <p style={{ margin: 0, fontWeight: 700 }}>{heading}</p>
        <p style={{ margin: "4px 0 0", fontSize: 12, opacity: .8 }}>{detail}</p>
        {showAction && <button type="button" style={{ marginTop: 10, padding: "6px 12px", borderRadius: 7, border: "1.5px solid currentColor", background: "none", fontWeight: 700, fontSize: 12, cursor: "pointer", color: "inherit" }}>This wasn’t me</button>}
      </div>
    </div>
  );
}