All examples here are to illustrate the contents of the notifications, not the UI elements that launch them.

Success Notification

Success Notification. This takes a title, message, toastr options, redux actions, and will return the toastr object.

HTML

<div ng-controller="NotificationExampleController as $ctrl" class="t-content g-notificationExample">
    <div class="t-notification t-notification--success c-notification">
        <inv-icon class="c-notification-toastIcon" glyph="'check-circle'"></inv-icon>
        <div class="c-notification-content">
            <div class="c-notification-message" aria-label="This is a confirmation banner message.">
                This is a confirmation banner message.
            </div>
        </div>
        <button class="c-notification-close"><inv-icon glyph="'close_large'"></inv-icon></button>
    </div>
    <button class="c-button c-button--primary" ng-click="$ctrl.success()">Success</button>
</div>

Info Notification

Info Notification. This takes a title, message, toastr options, redux actions, and will return the toastr object.

HTML

<div ng-controller="NotificationExampleController as $ctrl" class="t-content g-notificationExample">
    <div class="t-notification t-notification--info c-notification">
        <inv-icon class="c-notification-toastIcon" glyph="'info-circle'"></inv-icon>
        <div class="c-notification-content">
            <div class="c-notification-message" aria-label="This is an info banner message.">
                This is an info banner message.
            </div>
        </div>
        <button class="c-notification-close"><inv-icon glyph="'close_large'"></inv-icon></button>
    </div>
    <button class="c-button c-button--primary" ng-click="$ctrl.info()">Info</button>
</div>

Warning Notification

Warning Notification. This takes a title, message, toastr options, redux actions, and will return the toastr object.

HTML

<div ng-controller="NotificationExampleController as $ctrl" class="t-content g-notificationExample">
    <div class="t-notification t-notification--warning c-notification">
        <inv-icon class="c-notification-toastIcon" glyph="'exclamation-circle'"></inv-icon>
        <div class="c-notification-content">
            <div class="c-notification-content" aria-label="This is a warning banner message.">
                This is a warning banner message.
            </div>
        </div>
        <button class="c-notification-close"><inv-icon glyph="'close_large'"></inv-icon></button>
    </div>
    <button class="c-button c-button--primary" ng-click="$ctrl.warning()">Warning</button>
</div>

Error Notification

Error Notification. This takes a title, message, toastr options, redux actions, and will return the toastr object.

HTML

<div ng-controller="NotificationExampleController as $ctrl" class="t-content g-notificationExample">
    <div class="t-notification t-notification--error c-notification">
        <inv-icon class="c-notification-toastIcon" glyph="'exclamation-circle'"></inv-icon>
        <div class="c-notification-content">
            <div class="c-notification-message" aria-label="This is an error banner message.">
                Extra long message Hendrerit auctor lacus condimentum potenti lorem leo suspendisse velit placerat parturient ullamcorper condimentum dui scelerisque a nibh donec faucibus tristique vitae id.Nisl odio ad nulla condimentum cras vestibulum eu suscipit cum non neque vestibulum platea sem suspendisse magna ante litora mi nostra parturient sit habitasse magna morbi consequat potenti senectus.Dapibus proin ac class tincidunt fermentum pretium cubilia praesent quis senectus eget dui phasellus pretium etiam gravida luctus maecenas.Nec consectetur parturient donec netus a ullamcorper elit natoque sagittis a vestibulum condimentum integer ac.Hac..
            </div>
        </div>
        <button class="c-notification-close"><inv-icon glyph="'close_large'"></inv-icon></button>
    </div>
    <button class="c-button c-button--primary" ng-click="$ctrl.error()">Error</button>
    <button class="c-button" ng-click="$ctrl.errorDefault()">Error without a message or title</button>
    <button class="c-button" ng-click="$ctrl.extraLongError()">Extra Long Error</button>
</div>

Transient Success Notification

Transient Notification

HTML

<div ng-controller="NotificationExampleController as $ctrl" class="t-content g-notificationExample">
    <div class="t-notification t-notification--success c-notification">
        <inv-icon class="c-notification-toastIcon" glyph="'check-circle'"></inv-icon>
        <div class="c-notification-content">
            <div class="c-notification-title" aria-label="Transient Title">Transient Title</div>
            <div class="c-notification-message" aria-label="This is a confirmation banner message.">
                This is a transient success notification.
            </div>
        </div>
        <button class="c-notification-close"><inv-icon glyph="'close_large'"></inv-icon></button>
    </div>
    <button class="c-button c-button--primary" ng-click="$ctrl.transientSuccess()">Transient Success</button>
</div>

Banner Notification

Banner notifications can be used to notify the user of a message with potential more details. Often used in conjunction with the content container.

HTML

<div ng-controller="BannerNotificationExampleController as $ctrl" class="t-content g-bannerNotificationExample">
    <banner-notification
        expandable="$ctrl.expandable"
        expander-label="$ctrl.expanderLabel"
        is-expanded="$ctrl.isExpanded"
        on-expand="$ctrl.onExpand"
        show-action="true"
        action-label="$ctrl.actionLabel"
        on-action="$ctrl.onAction"
        glyph="'health-ok'"
        message="$ctrl.message"
        type="'warning'"
        expanded-message="$ctrl.expandedMessage">
    </banner-notification>
</div>