Banners/ Alerts

[ibalat]

Hi, please can you add alerts component with variations like with icon, without icon, color etc..

[joshhanley]

@ibalat thanks for the request! We already have Toasts that do that, will that do what you want? See https://fluxui.dev/components/toast

[ibalat]

not like toast, we need to use alerts as page components to give information or warning. Actually you're using it at flux doc page:

[joshhanley]

@ibalat ah you're talking about banners! I've renamed this discussion. Alerts typically are popups/modals that require user action

[jeffchown]

@ibalat I use the flux:badge for such alerts, just making them w-full. That way I get the same palette/colour choices that were designed for Flux badges and can add icons, etc.

e.g.

<flux:badge color="green" class="w-full px-4 py-3">
    <flux:icon.check class="mr-2 size-4"/> A badge used as an 'Alert'
</flux:badge>

If you want to make it even easier to use you can create your own component to 'wrap' the badge usage.

[ibalat]

This way is so useful, thanks for reply, I will use it 👏🏻

[jeffchown]

You're welcome, @ibalat !

[mydnic]

A real Alert/Message/Banner component would be useful, especially with a close button but for exemple, or a slot for actions

Almost all UI libraries have that

eg https://mary-ui.com/docs/components/alert

[renfordt]

Totally agree!
Badges and Alerts/Banners are in my eyes two different Components.
A Badge is in my eyes a small information while an alert is something important more present. It shall warn or give the user feedback if something worked or not. And if not, what possible solutions could be done.
Based on this an alert will contain more information/text and also some actions like links, buttons and so on.

Using a badge for this feels like a developer playing with design. And as you know: We all suck at design.

TailwindUI has also already some predefined designs, which may give you a good impression how it could be used: TailwindUI Alerts

[mauritskorse]

I created my own implementation using the badge component. It also has a dismissable (close button) and persistable (keep the message hidden after it was dismissed using Alpines $persist) and an autohide (in milliseconds).
You can use the variants property for default presets (success, error, warning and info) or customize your callout (alert) using icon and color:

Preview

Usage

        <flux:callout variant="success" dismissable persistable>Good job!</flux:callout>
        <flux:callout variant="error" dismissable>Oops, something went wrong</flux:callout>
        <flux:callout variant="warning">You're not allowed to do this. And you know it. Therefore you can't dismiss this warning. </flux:callout>
        <flux:callout variant="info" dismissable autohide="2000">A message was sent.</flux:callout>

Component

{{-- /resources/views/flux/callout.blade.php --}}
@props([
    'color' => 'blue',
    'class' => null,
    'icon' => null,
    'dismissable' => null,
    'variant' => null,
    'iconVariant' => null,
    'iconClasses' => null,
    'uniqueId' => null,
    'autohide' => null,
    'persistable' => null,
])

@php
    $classes = Flux::classes()
        ->add('w-full px-3 py-2 !whitespace-normal !items-start');

    $iconClasses = Flux::classes()
        ->add('mr-2 size-5');

        
    if($dismissable || $autohide) {
        $uniqueId = $uniqueId ?? 'alert'.hash('murmur3f',$slot);
    }
    
    if($variant){
        $color = match($variant){
            'success' => 'green',
            'error' => 'red',
            'warning' => 'yellow',
            'info' => 'blue',
            default => $color,
        };
        $icon = match($variant){
            'success' => 'check-circle',
            'error' => 'exclamation-circle',
            'warning' => 'exclamation-triangle',
            'info' => 'information-circle',
            default => $icon,
        };
    }

@endphp

<?php if (isset($dismissable) || isset($autohide)): ?>
<div
    <?php if (isset($persistable)): ?>
    x-data="{ {{ $uniqueId }} : $persist(true).using(sessionStorage) }" 
    <?php else: ?>
    x-data="{ {{ $uniqueId }} : true }"
    <?php endif; ?>
    x-show="{{ $uniqueId }} " x-transition x-cloak
    @isset($autohide) x-init="setTimeout(() => { {{ $uniqueId }} = false }, {{ $autohide }});" @endisset
    >
<?php endif; ?>
<flux:badge :$color :class="$classes">
    <?php if (is_string($icon) && $icon !== ''): ?>
        <flux:icon :icon="$icon" :variant="$iconVariant" :class="$iconClasses"/>
    <?php elseif ($icon): ?>
        {{ $icon }}
    <?php endif; ?>

    <div>
    {{ $slot }}
    </div>

    <?php if (isset($dismissable)): ?>
        <flux:spacer />
        <flux:button icon="x-mark" x-on:click="{{ $uniqueId }} = ! {{ $uniqueId }}" size="xs" inset="top bottom" variant="subtle"></flux:button>
    <?php endif; ?>
</flux:badge>
<?php if (isset($dismissable)  || isset($autohide)): ?>
</div>
<?php endif; ?>

[ibalat]

very nice, @calebporzio @jeffchown pls can you add this component to package will release 24 feb?

[marksalmon]

Nice work.

I think there are a couple of typos:

- if($dismissable) {
+ if($dismissable || $autohide) {
    $uniqueId = $uniqueId ?? 'alert'.hash('murmur3f',$slot);
}

and

- <?php if (isset($dismissable) || isset($authide)): ?>
+ <?php if (isset($dismissable) || isset($autohide)): ?>

[marksalmon]

and

- <?php if (isset($dismissable)): ?>
+ <?php if (isset($dismissable) || isset($autohide)): ?>

[Tor2r]

Another typo:

-<?php if (isset($dismissable)  || isset$autohide)): ?>
+<?php if (isset($dismissable)  || isset($autohide)): ?>

[helderneves91]

I'm using badges as an alert and to me it feels very wrong lol...

[helderneves91]

Could you ship it? TBH, LGTM

[helderneves91]

This thread can now be closed as callouts has been published.

[joshhanley]

Thanks! They've been released in v2.0.5.