Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
Interface and examples language
English
Version
20.2.0
Alert 
import { KbqAlertModule } from '@koobiq/components/alert';
Directives
KbqAlertTitle

Marks the projected alert heading.

Selector: [kbq-alert-title]

Exported as: kbqAlertTitle
KbqAlertCloseButton

Marks the projected close control (place it on a native `

KbqAlertControl

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

Selector: [kbq-alert-control]

Exported as: kbqAlertControl
KbqAlert

Shows important information on a page. Can carry a hint, signal a status change, or indicate a problem. ```html Something went wrong ``` For a dynamically inserted alert, add `role="alert"` (or `aria-live`) on the host so assistive technology announces it — see the component guide.

Selector: kbq-alert

Exported as: kbqAlert
Properties
Name Description
@Input()
alertColor: InputSignalWithTransform<"error" | "warning" | "success" | "info", "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`).
@Input()
alertStyle: InputSignal<"default" | "colored"> 		Visual style — neutral `default` or the attention-drawing `colored` background.
@Input()
compact: InputSignalWithTransform 		Whether the alert uses the denser compact size.
@Output('closed')
closed: OutputEmitterRef 		Emitted when the projected close control is activated. The consumer is responsible for hiding the alert.
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.