Alerts

Alerts are used to display important messages to the user.

Standard Alert

Default Alert

This is a default alert message.

Success Alert

Operation completed successfully.

Warning Alert

Please review before proceeding.

Error Alert

An error occurred during the process.

Alert Title Only

An error occurred during the process with description only.

<mijnui:alert class="w-full max-w-lg">
    <mijnui:alert.icon icon="fa-solid fa-bell" />
    <mijnui:alert.title>Default Alert</mijnui:alert.title>
    <mijnui:alert.description>This is a default alert message.</mijnui:alert.description>
</mijnui:alert>

<mijnui:alert class="w-full max-w-lg" color="success">
    <mijnui:alert.icon icon="fa-solid fa-rocket"/>
    <mijnui:alert.title>Success Alert</mijnui:alert.title>
    <mijnui:alert.description>Operation completed successfully.</mijnui:alert.description>
</mijnui:alert>

<mijnui:alert class="w-full max-w-lg" color="warning">
    <mijnui:alert.icon icon="fa-solid fa-rocket"/>
    <mijnui:alert.title>Warning Alert</mijnui:alert.title>
    <mijnui:alert.description>Please review before proceeding.</mijnui:alert.description>
</mijnui:alert>

<mijnui:alert class="w-full max-w-lg" color="error">
    <mijnui:alert.icon icon="fa-solid fa-rocket"/>
    <mijnui:alert.title>Error Alert</mijnui:alert.title>
    <mijnui:alert.description>An error occurred during the process.</mijnui:alert.description>
</mijnui:alert>

<mijnui:alert class="w-full max-w-lg">
    <mijnui:alert.icon icon="fa-solid fa-rocket"/>
    <mijnui:alert.title>Alert Title Only</mijnui:alert.title>
</mijnui:alert>

<mijnui:alert class="w-full max-w-lg">
    <mijnui:alert.description class="pl-0">An error occurred during the process with description only.</mijnui:alert.description>
</mijnui:alert>

Accordions

Alert Dialog