Turbine UI - Laravel and Tailwind CSS Alert Component

Alert

Alert your user with a simple message

Tag: x-turbine-ui-alert

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	Description
accent	boolean	Adds an accent
border	boolean	Adds a border
dismissible	boolean	Adds a close button
hollow	boolean	Removes background colour
icon	string	Adds an icon
ring	boolean	Adds a ring
rounded	boolean	Adds a rounded corner
shadow	boolean	Adds a shadow
size	string	Size is used to control styles such as margin, padding and font size. Extensible via the theme.
title	string	Adds a title
variant	string	A variant is like a colour palette