Alert
oge-alert is an inline message in the page flow — an information note, a success, a warning or an error — with an optional title, an actions row and a dismiss button.
The role follows the severity: errors and warnings are role="alert" (assertive), information and success role="status" (polite). Both only announce content that changes, so the role stays on the host while the alert is hidden — showing it again is what screen readers announce. The glyph is decoration: a visually hidden prefix carries the severity, so it never rides on colour alone.
Severities
Four severities, four glyphs, four live-region roles: info / success are role="status", warning / error role="alert".
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeAlert } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeAlert],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- Role follows the severity: info / success are role="status"
(polite), warning / error role="alert" (assertive). The glyph is
aria-hidden; a visually hidden prefix ("Warning") carries the meaning. -->
<oge-alert severity="info">A new version is available.</oge-alert>
<oge-alert severity="success">Your changes were saved.</oge-alert>
<oge-alert severity="warning">Your trial ends in three days.</oge-alert>
<oge-alert severity="error">The payment could not be processed.</oge-alert>
`,
})
export class Demo {}Styling modes
soft (default) is a tinted surface with a severity rail, outlined a coloured frame, filled the solid severity colour with --oge-severity-contrast text.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeAlert } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeAlert],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- soft (default) is a tinted surface, outlined a coloured frame,
filled the solid severity colour with --oge-severity-contrast text. -->
<oge-alert severity="success" stylingMode="soft">Soft</oge-alert>
<oge-alert severity="success" stylingMode="outlined">Outlined</oge-alert>
<oge-alert severity="success" stylingMode="filled">Filled</oge-alert>
`,
})
export class Demo {}Title, actions & dismiss
dismissible adds a real dismiss button named from the messages catalog. closing is cancelable; when the alert held focus, focus moves to the next control instead of dropping to the page body.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeAlert, OgeAlertActions } from '@oge-ui/layout';
import type { OgeAlertClosingEvent } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeAlert, OgeAlertActions],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- dismissible adds a real "Dismiss" button; closing is cancelable and
focus moves past the alert instead of dropping to <body>. -->
<oge-alert
severity="warning"
title="Storage almost full"
[dismissible]="true"
[(visible)]="visible"
(closing)="confirmClose($event)"
>
You have used 92% of your quota.
<div ogeAlertActions>
<button type="button">Manage storage</button>
</div>
</oge-alert>
@if (!visible()) {
<button type="button" (click)="visible.set(true)">Show again</button>
}
`,
})
export class Demo {
protected readonly visible = signal(true);
protected confirmClose(event: OgeAlertClosingEvent): void {
// e.g. keep it while an upload is still running
event.cancel = false;
}
}Live regions
The role stays on the host while it is hidden, so showing the alert inserts its text into an existing live region and is announced. live="off" renders no role for a permanent note; assertive / polite force one.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeAlert } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeAlert],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- The role stays on the host while it is hidden, so showing the alert
again inserts its text into an existing live region — and screen readers
announce it. live="off" renders no role for a permanent note. -->
<button type="button" (click)="saved.set(!saved())">Toggle saved</button>
<oge-alert severity="success" [(visible)]="saved">Draft saved.</oge-alert>
<oge-alert severity="info" live="off">This page is read-only.</oge-alert>
`,
})
export class Demo {
protected readonly saved = signal(false);
}Custom icon
[ogeAlertIcon] replaces the default glyph inside an aria-hidden wrapper; [showIcon]="false" drops the icon column.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeAlert, OgeAlertIcon } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeAlert, OgeAlertIcon],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- [ogeAlertIcon] replaces the default glyph; it is rendered inside an
aria-hidden wrapper. showIcon=false drops the icon column. -->
<oge-alert severity="info" title="Tip">
<svg ogeAlertIcon viewBox="0 0 24 24" width="20" height="20" fill="none"
stroke="currentColor" stroke-width="2">
<path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z" />
</svg>
Press <kbd>?</kbd> to see every keyboard shortcut.
</oge-alert>
<oge-alert severity="info" [showIcon]="false">No icon at all.</oge-alert>
`,
})
export class Demo {}