Basic Footer Layout Navigation Others

Notification bar (notification_bar)

Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification.

🔗 External documentation.

ID Label Description Schema
message Message The alert message.
dismiss Dismiss? 
                        type: boolean
default: 1

                      
            id: notification_bar
label: 'Notification bar'
description: 'Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification. '
homepage: 'https://protocol.mozilla.org/components/detail/notification-bar--default.html'
variants:
    default:
        id: default
        label: Default
    success:
        id: success
        label: Success
        description: 'A positive notification, to indicate a successful action'
    warning:
        id: warning
        label: Warning
        description: 'A cautionary notification, to indicate something may be risky but the user can choose to proceed.'
    error:
        id: error
        label: Error
        description: 'A negative notification, to indicate an unsuccessful action.'
    click:
        id: click
        label: Click
        description: 'To call attention to some action the user should take.'
slots:
    message:
        id: message
        label: Message
        description: 'The alert message.'
props:
    dismiss:
        id: dismiss
        label: 'Dismiss?'
        schema:
            type: boolean
            default: 1
library:
    js:
        'https://data.dilla.io/protocol_1/components/notification_bar/notification_bar_init.js': {  }
    dependencies:
        - notification_bar
    id: notification_bar
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': notification_bar
            message: 'A simple alert—check it out!'
            dismiss: true

Default ( default )

<aside class="mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside>

Success ( success )

A positive notification, to indicate a successful action

<aside class="mzp-t-success mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside>

Warning ( warning )

A cautionary notification, to indicate something may be risky but the user can choose to proceed.

<aside class="mzp-t-warning mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside>

Error ( error )

A negative notification, to indicate an unsuccessful action.

<aside class="mzp-t-error mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside>

Click ( click )

To call attention to some action the user should take.

<aside class="mzp-t-click mzp-c-notification-bar"> <button class="mzp-c-notification-bar-button" type="button">Close notification</button> A simple alert—check it out! </aside>