Notification

Ready Added in 2.0.0

Create toggleable notifications that fade out automatically.

Usage

The notification will not fade out but remain visible when you hover the message until you stop hovering. You can also close the notification by clicking it. To show notifications, the component provides a simple JavaScript API. The following code snippet gets you started.

JavaScript

Gloss.notification({
    message: 'my-message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
});

// Shortcuts
Gloss.notification('My message');
Gloss.notification('My message', status);
Gloss.notification('My message', { /* options */ });
  • <button class="demo gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Notification message'})">Click me</button>
    

HTML message

You can use HTML inside your notification message, like an icon from the Icon component.

Gloss.notification("<span gls-icon='icon: check'></span> Message");
  • <button class="gls-button gls-button-default demo" type="button" onclick="Gloss.notification({message: '<span gls-icon=\'icon: check\'></span> Message with an icon'})">With icon</button>
    

Position

Add one of the following parameters to adjust the notification’s position to different corners.

Gloss.notification("...", {pos: 'top-right'})
Position Code
top-left Gloss.notification("...", {pos: 'top-left'})
top-center Gloss.notification("...", {pos: 'top-center'})
top-right Gloss.notification("...", {pos: 'top-right'})
bottom-left Gloss.notification("...", {pos: 'bottom-left'})
bottom-center Gloss.notification("...", {pos: 'bottom-center'})
bottom-right Gloss.notification("...", {pos: 'bottom-right'})
  • <p gls-margin>
        <button class="gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Top Left...', pos: 'top-left'})">Top Left</button>
        <button class="gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Top Center...', pos: 'top-center'})">Top Center</button>
        <button class="gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Top Right...', pos: 'top-right'})">Top Right</button>
        <button class="gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Bottom Left...', pos: 'bottom-left'})">Bottom Left</button>
        <button class="gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Bottom Center...', pos: 'bottom-center'})">Bottom Center</button>
        <button class="gls-button gls-button-default" type="button" onclick="Gloss.notification({message: 'Bottom Right...', pos: 'bottom-right'})">Bottom Right</button>
    </p>
    

Style

A notification can be styled by adding a status to the message to indicate a primary, success, warning or a danger status.

Gloss.notification("...", {status: 'primary'})
Style Code
primary Gloss.notification("...", {status:'primary'})
success Gloss.notification("...", {status:'success'})
warning Gloss.notification("...", {status:'warning'})
danger Gloss.notification("...", {status:'danger'})
info Gloss.notification("...", {status:'info'})
  • <p gls-margin>
        <button class="gls-button gls-button-default demo" type="button" onclick="Gloss.notification({message: 'Primary message...', status: 'primary'})">Primary</button>
        <button class="gls-button gls-button-default demo" type="button" onclick="Gloss.notification({message: 'Success message...', status: 'success'})">Success</button>
        <button class="gls-button gls-button-default demo" type="button" onclick="Gloss.notification({message: 'Warning message...', status: 'warning'})">Warning</button>
        <button class="gls-button gls-button-default demo" type="button" onclick="Gloss.notification({message: 'Danger message...', status: 'danger'})">Danger</button>
        <button class="gls-button gls-button-default demo" type="button" onclick="Gloss.notification({message: 'Info message...', status: 'info'})">Info</button>
    </p>
    

Close all

You can close all open notifications by calling Gloss.notification.closeAll().

  • <button class="gls-button gls-button-default close" onclick="Gloss.notification.closeAll()">Close All</button>
    

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
message String false Notification message to show.
status String null Notification status color.
timeout Number 5000 Visibility duration until a notification disappears. If set to 0, notification will not hide automatically.
group String null Useful, if you want to close all notifications in a specific group.
pos String top-center Display corner.

JavaScript

Learn more about JavaScript components.

Initialization

This is a Functional Component and may omit the element argument.

Gloss.notification(options);
Gloss.notification(message, status);

Events

The following events will be triggered on elements with this component attached:

Name Description
close Fires after the notification has been closed.

Methods

The following methods are available for the component:

Close

Gloss.notification(element).close(immediate);

Closes the notification.

Name Type Default Description
immediate Boolean true Transition the notification out.