Turbine UI - Laravel and Tailwind CSS Alert Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Alert

Alert your user with a simple message

x-t-alert

Preview and Examples

This is a default alert

This is a brand alert

This is a primary alert

This is a secondary alert

This is a success alert

This is a warning alert

This is a danger alert

Alert title

This is a primary alert with; title, icon, shadow & accent

<x-turbine-ui-alert
    class="mb-5"
    dismissible
>
    This is a default alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="brand"
    class="mb-5"
    dismissible
>
    This is a brand alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="primary"
    class="mb-5"
    dismissible
>
    This is a primary alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="secondary"
    class="mb-5"
    dismissible
>
    This is a secondary alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="success"
    class="mb-5"
    dismissible
>
    This is a success alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="warning"
    class="mb-5"
    dismissible
>
    This is a warning alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="danger"
    class="mb-5"
    dismissible
>
    This is a danger alert
</x-turbine-ui-alert>
 
<x-turbine-ui-alert
    variant="primary"
    class="mb-5"
    dismissible
    shadow
    accent
    title="Alert title"
    icon="<i class='fa-solid fa-triangle-exclamation'></i>"
>
    This is a primary alert with; title, icon, shadow & accent
</x-turbine-ui-alert>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
dismissible	boolean	true false	Adds a close button
hollow	boolean	true false	Removes background colour
icon	string	string	Adds an icon
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
title	string	string	Adds a title
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette