# Notifications

## If you want to show notification popups

#### Add this to your main  layout file. Near the closing \</body> tag, for z-index reasons.

```html
<x-tall-notification />
```

## Usage

### In a TallFormComponent

(Already included). Form submit success, and error messages will be automatically displayed. \
&#xNAN;_**You don't have to add anything to your TallFormComponent markup**_, just add the blade component to your main layout file and the rest is magic :)

### In a Livewire component or Headless forms

Add the Trait&#x20;

```php
use Livewire\Component;
use Tanthammar\TallForms\Traits\Notify;

class Foo extends Component
{
    use Notify;
}
```

### Dispatch notifications

```php
// Via browser event
$this->notify('success', 'Record updated');
$this->notify('The form was saved successfully')

// To session
$this->withSession()->notify('success', 'Record updated');
```

![](https://3246461946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQWt7hBSh108moAc0Al%2F-MiHBp6S7u4-dgHt1Cf6%2F-MiHCjlvztIYIJOGWmjI%2Fnotification-saved.png?alt=media\&token=fa92da59-6a94-448d-b4b3-08bb59d92e0d)

### Color options, $type

```php
//parameters
$this->notify($type, $message, $icon, $iconcolor);

//$type => [ $color, $icon, $iconcolor ]
'success', 'green', 'saved', 'check' => ['tf-bg-success', 'check', $iconcolor],
'warning', 'orange',                 => ['tf-bg-warning', 'exclamation', $iconcolor],
'happy', 'positive'                  => ['bg-white', 'happy', 'text-green-600'],
'sad', 'negative'                    => ['bg-white', 'sad', 'text-red-600'],
'danger', 'red'                      => ['tf-bg-danger', 'warning', $iconcolor],
'info', 'blue'                       => ['tf-bg-info', 'info', $iconcolor],

//Example
$this->notify('warning', 'Server error, nothing saved');
```

Omitting the $type property uses the default color from the config file.

```css
 /* Notification */
.tf-notify-bg-default {
    @apply bg-teal-400;
}
```

### Show validation errors

The notifications are show on the **second** click of the submit button. \
On the **first** click, error messages below each field will be shown.

Validation errors are automatically displayed in a standard form component.

If you want to show notification errors in other Livewire components add this to your submit button. For more info about the "tfjs" alias. See the [config](../concept/configuration) file.

```html
<form x-data wire:submit.prevent="saveAndStay">

    <button 
        type="submit" 
        x-on:click="$dispatch( 'replace-errors', {{ tfjs::from($errors->all()) }} )">
        Submit
    </button>

</form>
```

![](https://3246461946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQWt7hBSh108moAc0Al%2F-MiBqe89AL2MNHLN5OsL%2F-MiHBfMTcc9BK8YvwVQ4%2Fnotification-errors.png?alt=media\&token=d4f143e9-35cf-4044-984b-31ec0de476e1)

### Icons

The notification type selects the icon. To change the design, See [Icons](../concept/icons) page.
