PaackEng / paack-ui / UI.Alert

The UI.Alert is a component for displaying feedback in a full-width banner.

It can have different background colors depending on the type of feedback.

An alert can be created and render as in the following pipeline:

Element.column []
    [ Alert.danger "Failed to login."
        |> Alert.renderElement renderConfig
    , -- The rest of the screen (...)
    ]

Building


type Alert msg

The Alert msg type is used for describing the component for later rendering.

primary : String -> Alert msg

The primary color scheme applied to the alert background.

Alert.primary "Proceed to login..."

success : String -> Alert msg

The success color scheme applied to the alert background.

Alert.success "Category created with success."

warning : String -> Alert msg

The warning color scheme applied to the alert background.

Alert.warning "Proceed with caution!"

danger : String -> Alert msg

The danger color scheme applied to the alert background.

Alert.danger "Failed to apply changes!"

Optional

withGenericIcon : Alert msg -> Alert msg

Displays an icon in the right side of the alert, depending on its color scheme.

- Primary: Won't show any icon;
- Success: Shows [UI.Icon.check](UI-Icon#check);
- Warning: Will show a loading spinner;
- Danger: Shows [UI.Icon.warning](UI-Icon#warning).

withInlineStyle : Alert msg -> Alert msg

Inline style makes the alert's corners rounded

Rendering

renderElement : UI.RenderConfig.RenderConfig -> Alert msg -> Element msg

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.