Alert

Recipe CSS

This is the exact CSS your kit ships for Alert — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Alert === */
.alert {
  display: flex;
  gap: var(--k-s-10);
  padding-block: var(--k-s-10);
  padding-inline: max(var(--k-s-12), calc(var(--k-radius-md) * 0.7));
  border-radius: var(--k-radius-md);
  font-size: var(--k-type-small);
  align-items: flex-start;
}
.alert--info { background: var(--k-info-soft); color: var(--k-info-soft-fg); }
.alert--danger { background: var(--k-danger-soft); color: var(--k-danger-soft-fg); }
.alert--success { background: var(--k-success-soft); color: var(--k-success-soft-fg); }
.alert--warning { background: var(--k-warning-soft); color: var(--k-warning-soft-fg); }
.alert__body { display: flex; flex-direction: column; gap: var(--k-s-2); flex: 1; min-width: 0; }
.alert__title { font-weight: var(--k-weight-semibold); }
.alert__close {
  background: transparent;
  border: 0;
  padding: var(--k-s-2);
  cursor: pointer;
  color: currentColor;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border-radius: var(--k-radius-md);
  transition: background var(--k-dur-fast, 120ms) var(--k-ease, ease), opacity var(--k-dur-fast, 120ms) var(--k-ease, ease), color var(--k-dur-fast, 120ms) var(--k-ease, ease);
}
.alert__close:hover { opacity: 1; background: var(--k-state-hover); }