Alert

Tailwind CSS and Alpine JS Alert

Alerts allow you to communicate important information to users and offer feedback on their actions.

Default Alert

An alert with an icon, title, and message allows you to inform users about critical updates or changes in the system. You can toggle the icon on or off.

HTML
<!-- info Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Update Available</h3>
            <p class="">A new version is available. Please update to the latest version.</p>
        </div>
    </div>
</div>

<!-- success Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Successfully Subscribed</h3>
            <p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
        </div>
    </div>
</div>

<!-- warning Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Credit Card Expires Soon</h3>
            <p class="">Your credit card expires soon. Please update your payment information.</p>
        </div>
    </div>
</div>

<!-- danger Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Invalid Email Address</h3>
            <p class="">The email address you entered is invalid. Please try again.</p>
        </div>
    </div>
</div>

Alert with List

An alert with a list of items allows you to notify users about items that require their attention. You can toggle the icon on or off.

HTML
<!-- danger Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Password is not strong</h3>
            <p class="">The password you entered does not meet the requirements. Make sure your password:</p>
            <ul class="">
                <li>has <strong>minimum 8</strong> characters</li>
                <li>includes <strong>both upper and lower </strong> cases</li>
                <li>contains <strong>at least one number</strong></li>
            </ul>
        </div>
    </div>
</div>

<!-- info Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Password Requirements</h3>
            <p class="">In order to keep your account secure, make sure your password:</p>
            <ul class="">
                <li>has <strong>minimum 8</strong> characters</li>
                <li>includes <strong>both upper and lower </strong> cases</li>
                <li>contains <strong>at least one number</strong></li>
            </ul>
        </div>
    </div>
</div>

An alert with a link allows you to direct users to a specific page or section of your website.

HTML
<!-- info Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
        <div>
            <h3 class="">Update Available</h3>
            <p class="">A new version is available. Please update to the latest version.</p>
        </div>
        <a href="#" class="">
            Details
        </a>
        </div>
    </div>
</div>

<!-- success Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
        <div>
            <h3 class="">Successfully Subscribed</h3>
            <p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
        </div>
        <a href="#" class="">
            Details
        </a>
        </div>
    </div>
</div>

<!-- warning Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
        <div>
            <h3 class="">Credit Card Expires Soon</h3>
            <p class="">Your credit card expires soon. Please update your payment information.</p>
        </div>
        <a href="#" class="">
            Details
        </a>
        </div>
    </div>
</div>

<!-- danger Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
        <div>
            <h3 class="">Invalid Email Address</h3>
            <p class="">The email address you entered is invalid. Please try again.</p>
        </div>
        <a href="#" class="">
            Details
        </a>
        </div>
    </div>
</div>

Alert with Action

An alert with action buttons allows you to provide users with a quick way to take action.

HTML
<!-- info Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
            <div>
                <h3 class="">Update Available</h3>
                <p class="">A new version is available. Please update to the latest version.</p>
            </div>
            <div class="">
                <button type="button" class="">
                    Update Now
                </button>
                <button type="button" class="">
                    Dismiss
                </button>
            </div>
        </div>
    </div>
</div>

<!-- success Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
            <div>
                <h3 class="">Successfully Subscribed</h3>
                <p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
            </div>
            <div class="">
                <button type="button" class="">
                    Dashboard
                </button>
                <button type="button" class="">
                    Dismiss
                </button>
            </div>
        </div>
    </div>
</div>

<!-- warning Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
            <div>
                <h3 class="">Credit Card Expires Soon</h3>
                <p class="">Your credit card expires soon. Please update your payment information.</p>
            </div>
            <div class="">
                <button type="button" class="">
                    Update Now
                </button>
                <button type="button" class="">
                    Dismiss
                </button>
            </div>
        </div>
    </div>
</div>

<!-- danger Alert -->
<div class="" role="alert">
    <div class="">
        <div class="">
            <div>
                <h3 class="">Invalid Email Address</h3>
                <p class="">The email address you entered is invalid. Please try again.</p>
            </div>
            <div class="">
                <button type="button" class="">
                    Try Again
                </button>
                <button type="button" class="">
                    Dismiss
                </button>
            </div>
        </div>
    </div>
</div>

Alert Dismiss Functionality

Requires Alpine JS

An alert with dismiss functionality implemented using Alpine JS.

HTML
<!-- info Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Update Available</h3>
            <p class="">A new version is available. Please update to the latest version.</p>
        </div>
    </div>
</div>

<!-- success Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Successfully Subscribed</h3>
            <p class="">Success! You've subscribed to our newsletter. Welcome aboard!</p>
        </div>
    </div>
</div>

<!-- warning Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Credit Card Expires Soon</h3>
            <p class="">Your credit card expires soon. Please update your payment information.</p>
        </div>
    </div>
</div>

<!-- danger Alert -->
<div class="" role="alert">
    <div class="">
        <div>
            <h3 class="">Invalid Email Address</h3>
            <p class="">The email address you entered is invalid. Please try again.</p>
        </div>
    </div>
</div>

Data

List of all Alpine JS data used in this component.

Property Description
alertIsVisible Boolean - Alert is visible on the page

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Enter Focused item gets selected