Icons

Icons by @ng-icons/tabler-icons

The component library does not provide icons.

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Alert

Contextual feedback blocks for status, caution, and system messaging.

01 Hero Preview

Grid: 8px · Scale: 1:1

Scheduled maintenance tonight

Dashboard exports will be briefly unavailable from 23:00 to 23:30 while reporting infrastructure is upgraded.

02 Usage

import { FrAlertModule } from '@frame-ui-ng/components/alert';

HTML

<section frAlert [variant]="'info'">
  <ng-icon frAlertIcon name="tablerInfoCircle" />
  <h3 frAlertTitle>Scheduled maintenance tonight</h3>
  <p frAlertDescription>
    Dashboard exports will be briefly unavailable from 23:00 to 23:30 while reporting infrastructure is upgraded.
  </p>
</section>

03 Examples

Basic

A straightforward informational alert with a title, description, and leading icon.

Component Sheet

Grid: 8px · Scale: 1:1

Heads up

Use alerts for important context, status changes, or system guidance that should remain visible near the related workflow.

Variants

Switch the variant input to match the tone of the message, from neutral guidance to confirmation, caution, or destructive states.

Component Sheet

Grid: 8px · Scale: 1:1

Information

Share neutral system context, rollout notes, or guidance before someone makes a decision.

Success

Confirm completed work, successful submissions, or background jobs that finished as expected.

Caution

Warn about risky steps, incomplete setup, or edge cases that deserve extra attention.

Destructive

Call out permanent loss, failed operations, or urgent states that need immediate action.

Supporting content

Additional non-title content stays in the message column, which makes room for short follow-up guidance beneath the main description.

Component Sheet

Grid: 8px · Scale: 1:1

Payment verification needed

This workspace cannot invite new members until the billing contact confirms the updated card details.

Remind owners before the renewal date to avoid access interruptions.

04 Custom Styling

Override alert tokens on a wrapper when a specific workflow needs a branded surface or denser spacing, while leaving the base component API unchanged.

Component Sheet

Grid: 8px · Scale: 1:1

Release notes available

Highlight launch details with a softer branded surface while keeping the core alert structure intact.

05 Token Inspector

Hover the icon, container, title, or description to inspect which alert tokens define spacing, type, and semantic surfaces. Click a region to pin the inspector while you review the current values.

Action required

Review the validation summary before publishing so missing data does not reach production.

06 Design Tokens

Use these CSS custom properties to tune alert surfaces, spacing, icon sizing, semantic variants, and text styles without changing the markup structure.

SCSS


  --frame-alert-root-bg: var(--frame-surface);
  --frame-alert-root-border: var(--frame-border);
  --frame-alert-root-color: var(--frame-surface-foreground);
  --frame-alert-root-radius: var(--frame-radius-md);
  --frame-alert-root-padding-y: 1rem;
  --frame-alert-root-padding-x: 1rem;
  --frame-alert-root-gap: 0.75rem;
  --frame-alert-root-icon-size: 1rem;
  --frame-alert-root-shadow: none;
  --frame-alert-root-destructive-bg: color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface));
  --frame-alert-root-destructive-border: color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border));
  --frame-alert-root-destructive-color: var(--frame-surface-foreground);
  --frame-alert-root-success-bg: color-mix(in srgb, var(--frame-success) 10%, var(--frame-surface));
  --frame-alert-root-success-border: color-mix(in srgb, var(--frame-success) 28%, var(--frame-border));
  --frame-alert-root-success-color: var(--frame-surface-foreground);
  --frame-alert-root-danger-bg: color-mix(in srgb, var(--frame-warning) 10%, var(--frame-surface));
  --frame-alert-root-danger-border: color-mix(in srgb, var(--frame-warning) 30%, var(--frame-border));
  --frame-alert-root-danger-color: var(--frame-surface-foreground);
  --frame-alert-root-info-bg: color-mix(in srgb, var(--frame-info) 10%, var(--frame-surface));
  --frame-alert-root-info-border: color-mix(in srgb, var(--frame-info) 28%, var(--frame-border));
  --frame-alert-root-info-color: var(--frame-surface-foreground);
  --frame-alert-title-font-size: 0.9375rem;
  --frame-alert-title-font-weight: 600;
  --frame-alert-description-color: var(--frame-muted-foreground);
  --frame-alert-description-font-size: 0.875rem;
  --frame-alert-description-line-height: 1.5;