The alert component serves as a flexible user interface element designed to communicate critical messages and information to users. Its primary purpose is to seize the user's attention and deliver feedback, warnings, notifications, or various other types of updates.
The alert component natively has 6 colors, which are: primary, secondary, positive, negative, warning and info. A simple way to use the alert is to just pass the title and the color you want, as in the example below:
1<x-alert title="Any Message!" /> 2 3<x-alert title="Any Message!" secondary /> 4 5<x-alert title="Success Message!" positive /> 6 7<x-alert title="Error Message!" negative /> 8 9<x-alert title="Alert Message!" warning />10 11<x-alert title="Information Message!" info />In the realm of the alert component, we offer three distinct variants to cater to the specific requirements of your project: flat, outline, and solid. It's important to note that the default variant for WireUI is flat.
1{{-- DEFAULT --}}2<x-alert title="Success Message!" positive flat />3 4<x-alert title="Success Message!" positive outline />5 6<x-alert title="Success Message!" positive solid />In the context of the alert component, you can utilize the title attribute as a slot for enhanced customization. If you require both a title and a description, you have the flexibility to pass the description into either the default slot, and even tailor the default slot to your specific needs.
1<x-alert warning> 2 <x-slot name="title" class="italic !font-bold"> 3 This is an alert alert — check it out! 4 </x-slot> 5</x-alert> 6 7<x-alert title="Success Message!" positive> 8 This is an success alert — <b>check it out!</b> 9</x-alert>10 11<x-alert title="Error Message!" negative>12 <x-slot name="slot" class="italic">13 This is an error alert — <b>check it out!</b>14 </x-slot>15</x-alert>Regarding padding, we provide a range of diverse options to enhance your project, and you have the freedom to customize these options to meet your specific needs.
1{{-- CSS: 'ml-2' --}} 2<x-alert title="Success Message!" positive padding="none"> 3 <x-slot name="slot"> 4 This is an success alert — <b>check it out!</b> 5 </x-slot> 6</x-alert> 7 8{{-- CSS: 'pl-1 mt-1 ml-3' --}} 9<x-alert title="Error Message!" negative padding="small">10 <x-slot name="slot">11 This is an error alert — <b>check it out!</b>12 </x-slot>13</x-alert>14 15{{-- CSS: 'pl-1 mt-2 ml-5' - DEFAULT --}}16<x-alert title="Alert Message!" warning padding="medium">17 <x-slot name="slot">18 This is an warning alert — <b>check it out!</b>19 </x-slot>20</x-alert>21 22{{-- CSS: 'pl-1 mt-3 ml-7' --}}23<x-alert title="Information Message!" info padding="large">24 <x-slot name="slot">25 This is an information alert — <b>check it out!</b>26 </x-slot>27</x-alert>28 29{{-- Or Custom --}}30<x-alert title="Any Message!" secondary padding="px-8 py-2">31 <x-slot name="slot">32 This is an any alert — <b>check it out!</b>33 </x-slot>34</x-alert>The alert component now offers a wide range of rounding customizations. You have access to all Tailwind options or the flexibility to create your own custom styles.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-alert title="Success Message!" positive squared /> 3 4{{-- CSS: 'rounded-sm' --}} 5<x-alert title="Error Message!" negative rounded="sm" /> 6 7{{-- CSS: 'rounded' - DEFAULT --}} 8<x-alert title="Alert Message!" warning rounded="base" /> 9 10{{-- CSS: 'rounded-md' --}}11<x-alert title="Information Message!" info rounded="md" />12 13{{-- CSS: 'rounded-lg' --}}14<x-alert title="Success Message!" positive rounded="lg" />15 16{{-- CSS: 'rounded-xl' --}}17<x-alert title="Error Message!" negative rounded="xl" />18 19{{-- CSS: 'rounded-2xl' --}}20<x-alert title="Alert Message!" warning rounded="2xl" />21 22{{-- CSS: 'rounded-3xl' --}}23<x-alert title="Information Message!" info rounded="3xl" />24 25{{-- CSS: 'rounded-full' - You can use |rounded| too --}}26<x-alert title="Success Message!" positive rounded="full" />27 28{{-- Or Custom --}}29<x-alert title="Error Message!" negative rounded="rounded-[1.25rem]" />The same applies to shadows. You can utilize all Tailwind options, and we also welcome customizable shadow values.
1{{-- CSS: 'shadow-none' - You can use |shadowless| too --}} 2<x-alert title="Success Message!" positive shadow="none" /> 3 4{{-- CSS: 'shadow-sm' --}} 5<x-alert title="Error Message!" negative shadow="sm" /> 6 7{{-- CSS: 'shadow' - DEFAULT --}} 8<x-alert title="Alert Message!" warning shadow="base" /> 9 10{{-- CSS: 'shadow-md' --}}11<x-alert title="Information Message!" info shadow="md" />12 13{{-- CSS: 'shadow-lg' --}}14<x-alert title="Success Message!" positive shadow="lg" />15 16{{-- CSS: 'shadow-xl' --}}17<x-alert title="Error Message!" negative shadow="xl" />18 19{{-- CSS: 'shadow-2xl' --}}20<x-alert title="Alert Message!" warning shadow="2xl" />21 22{{-- CSS: 'shadow-inner' --}}23<x-alert title="Information Message!" info shadow="inner" />The icons change based on the selected color. Below, you can see the icons displayed in their respective colors, but you also have the option to customize them or even remove them entirely.
- primary: bell
- secondary: information-circle
- positive: check-circle
- negative: x-circle
- warning: exclamation-triangle
- info: information-circle
1{{-- This icon is the default for the warning color --}}2<x-alert title="Warning Color!" warning />3 4{{-- In this alert we changed the icon to one we liked --}}5<x-alert title="Warning Color!" icon="arrow-left-on-rectangle" warning />6 7{{-- In this alert we completely removed the icon --}}8<x-alert title="Warning Color!" iconless warning />