Alert

Sectional status banner. A flex row with optional .alert__icon slot and a left-edge accent stripe in the page foreground.

Live

Combinations

Live

Default surface: neutral message.

Primary: highlight an action or fact.

Warning: recoverable problem the user should notice.

Danger: destructive or failed action.

Success: operation completed.

HTML

<div class="alert">
<span class="alert__icon" aria-hidden="true">ℹ️</span>
<div>Default surface: neutral message.</div>
</div>
<div class="alert is-primary" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">★</span>
<div>Primary: highlight an action or fact.</div>
</div>
<div class="alert is-warning" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">⚠️</span>
<div>Warning: recoverable problem the user should notice.</div>
</div>
<div class="alert is-danger" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">✕</span>
<div>Danger: destructive or failed action.</div>
</div>
<div class="alert is-success" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">✓</span>
<div>Success: operation completed.</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-alert')
);

Playground

Without icon slot

Live

The icon slot is optional: text-only alerts work too.

HTML

<div class="alert">The icon slot is optional: text-only alerts work too.</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-alert')
);

Playground

Light variant on combinations (.is-<combo>.is-light)

Live

Primary light: tonal surface for less-urgent highlights.

Warning light.

Danger light.

Success light.

HTML

<div class="alert is-primary is-light">
<span class="alert__icon" aria-hidden="true">★</span>
<div>Primary light: tonal surface for less-urgent highlights.</div>
</div>
<div class="alert is-warning is-light" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">⚠️</span>
<div>Warning light.</div>
</div>
<div class="alert is-danger is-light" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">✕</span>
<div>Danger light.</div>
</div>
<div class="alert is-success is-light" style="margin-top: 0.75rem;">
<span class="alert__icon" aria-hidden="true">✓</span>
<div>Success light.</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-alert')
);

Playground

Markup

<div class="alert is-warning" role="alert">
  <span class="alert__icon" aria-hidden="true">⚠️</span>
  <div>Heads up: your session expires in 5 minutes.</div>
</div>

When to use

Sectional status surfaces inside the page flow (form errors, banners, soft warnings).
For transient toast / live announcements, render the alert inside an aria-live region you manage: the framework styles the visual only.
role="alert" is not auto-applied. Add it (or role="status") yourself when the alert appears dynamically; static decorative banners need no role.

Variables

Variable	Default	Notes
`$selector`	`'.alert'`	Class only.
`$icon-selector`	`'.alert__icon'`	Optional first-child slot.
`$padding-y`	`$size-small` (0.75rem)	Vertical padding.
`$padding-x`	`$size-normal` (1rem)	Horizontal padding.
`$accent-width`	`3px`	Left-edge stripe width.
`$icon-gap`	`$size-extra-small` (0.5rem)	Gap between icon and prose.
`$border-radius`	`$global-border-radius` (5px)	Surface corner radius.
`$container-name`	`null`	Opt-in container-query host. When set, the plugin emits `container-type: inline-size` on the alert so consumers can scope their own queries to alert width.

See Combinations and light variants for $enable-light, $default-combination, and $controls — cross-cutting plumbing common to every theme-aware component.

Override example

@use '@adnap/krysalicss/module/alert' with (
  $selector: '.notice',
  $padding-y: 1rem,
  $accent-width: 4px,
);

Tokens consumed

Token	Used for
`--kc-alert-bg` / `--kc-alert-fg`	Plain `.alert`.
`--kc-{label}-bg` / `--kc-{label}-fg`	Each combination modifier.
`--kc-{label}-light-bg` / `--kc-{label}-light-fg`	`.is-<combo>.is-light` soft-tint variant. Emitted per theme by `theme/_create.scss` so the tint tracks the active surface.
`--kc-fg`	Left-edge accent stripe (constant across combinations).