UI Components

Alert

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

Claim Your Discount Now

# Basic usage

Primary

Blue

Amber

Red

Green

<x-alert title="Primary" dismissible />
<x-alert title="Blue" dismissible blue />
<x-alert title="Amber" dismissible amber />
<x-alert title="Red" dismissible red />
<x-alert title="Green" dismissible success />

# Alert description

Alert title goes here

Lorem, ipsum dolor sit amet consectetur adipisicing.

<x-alert description="Lorem, ipsum dolor sit amet consectetur adipisicing." red />

# Alert dismissible

Alert title goes here

<x-alert red dismissible />

# Custom icon

New version has been released.

<x-alert icon="rocket-launch" title="New version has been released." blue dismissible />

# Custom slots

A new software update is available. See what's new in version 3.0.7

Description! Lorem, ipsum dolor sit amet consectetur adipisicing Lorem, ipsum..

<x-alert icon="question-mark-circle" red>
    <x-slot name="title">
        A new software update is available. See what's new in <strong class="underline cursor-pointer">version
            3.0.7</strong>
    </x-slot>
 
    <x-slot name="description">
        Description! Lorem, ipsum dolor sit amet consectetur adipisicing Lorem, ipsum..
    </x-slot>
 
    <x-slot name="actions">
        <x-button @click="visible = false" label="Close" flat sm red />
    </x-slot>
</x-alert>

# Color variants

Primary

Secondary

Black

White

Slate

Zinc

Gray

Neutral

Stone

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

<x-alert title="Primary" />
<x-alert title="Secondary" secondary />
<x-alert title="Black" black />
<x-alert title="White" white />
<x-alert title="Slate" slate />
<x-alert title="Zinc" zinc />
<x-alert title="Gray" gray />
<x-alert title="Neutral" neutral />
<x-alert title="Stone" stone />
<x-alert title="Red" red />
<x-alert title="Orange" orange />
<x-alert title="Amber" amber />
<x-alert title="Yellow" yellow />
<x-alert title="Lime" lime />
<x-alert title="Green" green />
<x-alert title="Emerald" emerald />
<x-alert title="Teal" teal />
<x-alert title="Cyan" cyan />
<x-alert title="Sky" sky />
<x-alert title="Blue" blue />
<x-alert title="Indigo" Indigo />
<x-alert title="Violet" violet />
<x-alert title="Purple" purple />
<x-alert title="Fuchsia" fuchsia />
<x-alert title="Pink" pink />
<x-alert title="Rose" rose />

# Rounded corner

Rounded none

Rounded sm

Rounded Default

Rounded md

Rounded lg

Rounded xl

Rounded 2xl

Rounded 3xl

Rounded full

<x-alert title="Rounded none" rounded-none />
<x-alert title="Rounded sm" rounded-sm />
<x-alert title="Rounded Default" />
<x-alert title="Rounded md" rounded-md />
<x-alert title="Rounded lg" rounded-lg />
<x-alert title="Rounded xl" rounded-xl />
<x-alert title="Rounded 2xl" rounded-2xl />
<x-alert title="Rounded 3xl" rounded-3xl />
<x-alert title="Rounded full" rounded-full />