menu
0.11.5
Alert
Component that displays an alert.
Module
import '@capitec/omni-components/alert';
content_copy 
import { OmniAlert } from "@capitec/omni-components-react/alert";
content_copy
Source
Packages
Interactive
Showing Alerts
Showing Alerts Async
Status
Header Align
Description Align
Primary Action
Secondary Action
Action Align
Custom Status Indicator
Custom Header
Custom Body
Custom Primary Action
Custom Secondary Action
Interactive Showing Alerts Showing Alerts Async Status Header Align Description Align Primary Action Secondary Action Action Align Custom Status Indicator Custom Header Custom Body Custom Primary Action Custom Secondary Action

Properties

Name Attribute Type Description
status status  
'success' | 'warning' | 'error' | 'info' | 'none'
 The alert status (Defaults to 'none').
message message  
string | undefined
 The alert header message.
headerAlign header-align  
'left' | 'center' | 'right' | undefined
 Header content horizontal alignment:
- left Align header to the left.
- center Align header to the center. (Default)
- right Align header to the right.
description description  
string | undefined
 The alert detail message.
descriptionAlign description-align  
'left' | 'center' | 'right' | undefined
 Description content horizontal alignment:
- left Align description content to the left.
- center Align description content to the center. (Default)
- right Align description content to the right.
primaryAction primary-action  
string | undefined
 The primary action button label (Defaults to 'Ok').
secondaryAction secondary-action  
string | undefined
 The secondary action button label (Defaults to 'Cancel').
enableSecondary enable-secondary  
boolean | undefined
 If true, will provide a secondary action button.
actionAlign action-align  
'left' | 'center' | 'right' | 'stretch' | undefined
 Action button(s) horizontal alignment:
- left Align action button(s) to the left.
- center Align action button(s) to the center.
- right Align action button(s) to the right. (Default)
- stretch Align action button(s) stretched to fill the horizontal space.
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Instance Functions

Name Parameters Returns Description
showAsync 
Promise<"auto" | "primary" | "secondary">
 Show the omni-alert asynchronously, waits for it to close and returns the reason for close.
show 
Alert
 Show the omni-alert.
hide 
void
 Hide the omni-alert and remove the component from the DOM

Static Functions

Name Parameters Returns Description
create 
init - AlertInit
 
Alert
 Create a global omni-alert element without showing it.
show 
init - AlertInit & {
            onClose?: (reason: 'auto' | 'primary' | 'secondary') => void;
        }
 
Alert
 Show a global omni-alert element.
showAsync 
init - AlertInit
 
Promise<"auto" | "primary" | "secondary">
 Show a global omni-alert element asynchronously, waits for it to close and returns the reason for close.

Events

Name Type Description
alert-close 
CustomEvent
 Dispatched when the alert is closed.
alert-action-click 
CustomEvent
 Dispatched when an alert action button is clicked.

Types

Name Type
AlertInit 
{
    /**
     * The id to apply to the Alert element.
     */
    id?: string;

    /**
     * A function that returns, or an instance of content to render as the alert status indicator
     */
    statusIndicator?: RenderFunction | RenderResult;

    /**
     * A function that returns, or an instance of content to render in the alert header
     */
    header?: RenderFunction | RenderResult;

    /**
     * A function that returns, or an instance of content to render as alert body
     */
    body?: RenderFunction | RenderResult;

    /**
     * A function that returns, or an instance of content to render as the alert primary action
     */
    primary?: RenderFunction | RenderResult;

    /**
     * A function that returns, or an instance of content to render as the alert secondary action
     */
    secondary?: RenderFunction | RenderResult;

    /**
     * The alert status (Defaults to 'none').
     */
    status?: 'success' | 'warning' | 'error' | 'info' | 'none';

    /**
     * The alert header message.
     */
    message?: string;

    /**
     * Header content horizontal alignment:
     *  - `left` Align header to the left.
     *  - `center` Align header to the center. (Default)
     *  - `right` Align header to the right.
     */
    headerAlign?: 'left' | 'center' | 'right';

    /**
     * The alert detail message.
     */
    description?: string;

    /**
     * Description content horizontal alignment:
     *  - `left` Align description content to the left.
     *  - `center` Align description content to the center. (Default)
     *  - `right` Align description content to the right.
     */
    descriptionAlign?: 'left' | 'center' | 'right';

    /**
     * The primary action button label (Defaults to 'Ok').
     */
    primaryAction?: string;

    /**
     * The secondary action button label (Defaults to 'Cancel').
     */
    secondaryAction?: string;

    /**
     * If true, will provide a secondary action button.
     */
    enableSecondary?: boolean;

    /**
     * Action button(s) horizontal alignment:
     *  - `left` Align action button(s) to the left.
     *  - `center` Align action button(s) to the center.
     *  - `right` Align action button(s) to the right. (Default)
     *  - `stretch` Align action button(s) stretched to fill the horizontal space.
     */
    actionAlign?: 'left' | 'center' | 'right' | 'stretch';
}

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
status-indicator
 Content to render as the status indicator instead of default status icons. 
header
 Content to render inside the component message area. 
[Default Slot]
 Content to render inside the component description body. 
primary
 Content to render as the primary action button. 
secondary
 Content to render as the secondary action button.

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-alert-min-width
 Minimum width for alert. 
--omni-alert-max-width
 Maximum width for alert. 
--omni-alert-border
 Alert border. 
--omni-alert-border-radius
 Alert border radius. 
--omni-alert-box-shadow
 Alert box shadow. 
--omni-alert-animation-duration
 Alert fade in and out animation duration. 
--omni-alert-padding-top
 Alert content top padding. 
--omni-alert-padding-bottom
 Alert content bottom padding. 
--omni-alert-padding-left
 Alert content left padding. 
--omni-alert-padding-right
 Alert content right padding. 
--omni-alert-header-font-color
 Alert header font color. 
--omni-alert-header-font-family
 Alert header font family. 
--omni-alert-header-font-size
 Alert header font size. 
--omni-alert-header-font-weight
 Alert header font weight. 
--omni-alert-header-line-height
 Alert header line height. 
--omni-alert-header-background
 Alert header background. 
--omni-alert-header-padding-top
 Alert header top padding. 
--omni-alert-header-padding-bottom
 Alert header bottom padding. 
--omni-alert-header-padding-left
 Alert header left padding. 
--omni-alert-header-padding-right
 Alert header right padding. 
--omni-alert-description-font-color
 Alert description font color. 
--omni-alert-description-font-family
 Alert description font family. 
--omni-alert-description-font-size
 Alert description font size. 
--omni-alert-description-font-weight
 Alert description font weight. 
--omni-alert-description-line-height
 Alert description line height. 
--omni-alert-description-padding-top
 Alert description top padding. 
--omni-alert-description-padding-bottom
 Alert description bottom padding. 
--omni-alert-description-padding-left
 Alert description left padding. 
--omni-alert-description-padding-right
 Alert description right padding. 
--omni-alert-action-padding-top
 Alert actions part top padding. 
--omni-alert-action-padding-bottom
 Alert actions part bottom padding. 
--omni-alert-action-padding-left
 Alert actions part left padding. 
--omni-alert-action-padding-right
 Alert actions part right padding. 
--omni-alert-action-button-padding-top
 Alert action button(s) top padding. 
--omni-alert-action-button-padding-bottom
 Alert action button(s) bottom padding. 
--omni-alert-action-button-padding-left
 Alert action button(s) left padding. 
--omni-alert-action-button-padding-right
 Alert action button(s) right padding. 
--omni-alert-action-button-internal-padding-top
 Alert action button(s) internal top padding. 
--omni-alert-action-button-internal-padding-bottom
 Alert action button(s) internal bottom padding. 
--omni-alert-action-button-internal-padding-left
 Alert action button(s) internal left padding. 
--omni-alert-action-button-internal-padding-right
 Alert action button(s) internal right padding. 
--omni-alert-header-horizontal-gap
 Alert header horizontal space between status indicator and header content. 
--omni-alert-header-status-size
 Alert header status indicator symmetrical size.