Alert — API · Koobiq

import { KbqAlertModule } from '@koobiq/components/alert';

Components

KbqAlert

component

Shows important information on a page. Can carry a hint, signal a status change, or indicate a problem.

<kbq-alert [alertColor]="'error'" [alertStyle]="'colored'">Something went wrong</kbq-alert>

For a dynamically inserted alert, add role="alert" (or aria-live) on the host so assistive technology announces it — see the component guide.

 @Component({ selector: 'kbq-alert', exportAs: 'kbqAlert' })
class KbqAlert {
    readonly compact = input<boolean>(false);
    readonly alertStyle = input<KbqEnumValues<KbqAlertStyles>>(
        KbqAlertStyles.Default
    );
    readonly alertColor = input<"error" | "warning" | "success" | "info">(
        KbqAlertColors.Info
    );
    readonly closed = output<void>();
}

compactinputCopy link to compactboolean: Whether the alert uses the denser compact size.
alertStyleinputCopy link to alertStyleKbqEnumValues<KbqAlertStyles>: Visual style — neutral default or the attention-drawing colored background.
alertColorinputCopy link to alertColor"error" | "warning" | "success" | "info": Status of the alert. Drives the background in the colored style and auto-tints an uncolored projected status icon to the matching color (info icons become contrast). Defaults to 'info'.
closedoutputCopy link to closedvoid: Emitted when the projected close control is activated. The consumer is responsible for hiding the alert.

Directives

KbqAlertCloseButton

directive

Marks the projected close control (place it on a native <button> with an accessible name).

 @Directive({
    selector: '[kbq-alert-close-button]',
    exportAs: 'kbqAlertCloseButton'
})
class KbqAlertCloseButton {}

KbqAlertControl

directive

Marks a projected action control (link or button) shown in the alert's button stack.

 @Directive({ selector: '[kbq-alert-control]', exportAs: 'kbqAlertControl' })
class KbqAlertControl {}

KbqAlertTitle

directive

Marks the projected alert heading.

 @Directive({ selector: '[kbq-alert-title]', exportAs: 'kbqAlertTitle' })
class KbqAlertTitle {}

Enums

KbqAlertColors

enum

Status conveyed by an alert. Drives the background (colored style) and the auto-tinted status icon.

 enum KbqAlertColors {
    Error = 'error',
    Warning = 'warning',
    Success = 'success',
    Info = 'info'
}

KbqAlertStyles

enum

Visual style of an alert.

 enum KbqAlertStyles {
    Default = 'default',
    Colored = 'colored'
}

DefaultCopy link to Default'default': Neutral background; the status is conveyed by the icon color only.
ColoredCopy link to Colored'colored': Colored background matching the status — use to draw attention when a default alert gets lost on screen.

If you found a mistake or want to improve the article, create an issue on GitHub.