Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Notification

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<e-notification>
  <e-notification-title>
    Dolor do id duis 
  </e-notification-title>
  <e-notification-content>
    Dolore in ut cupidatat dolor dolor ut, amet. Occaecat exercitation dolor tempor occaecat in, velit aliqua mollit adipiscing. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification>
  <e-notification-title>
    Sint mollit ipsum non 
  </e-notification-title>
  <e-notification-content>
    Ipsum nostrud consectetur, veniam, minim ut magna do. Irure elit exercitation laborum, adipiscing do aliquip est. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Cupidatat enim sed qui Consectetur irure consequat excepteur minim esse exercitation. Excepteur aliquip ex ut dolore cupidatat, duis fugiat. Learn more

Variations

Custom icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[icon]

<e-notification icon="e-b2clogo-simple">
  <e-notification-title>
    Culpa eu deserunt laborum 
  </e-notification-title>
  <e-notification-content>
    Velit, ut ex, id in dolore mollit. Elit sint ex, nulla, cillum in cillum id aute nulla minim. Minim voluptate excepteur dolore ut irure duis veniam, nisi ut. Elit voluptate, do, ullamco reprehenderit anim, mollit enim sed sint, reprehenderit. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification icon="e-b2clogo-simple">
  <e-notification-title>
    Amet id excepteur ipsum 
  </e-notification-title>
  <e-notification-content>
    Velit irure ullamco, labore do sunt exercitation nisi est fugiat ex do aute eu. Ut, aliqua eu duis, fugiat sit cupidatat ex lorem culpa, mollit. Ut occaecat in, eiusmod veniam, irure aliqua in, ex consectetur, aute. Dolor cillum, culpa, anim laboris, commodo, tempor, dolore anim amet non. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Eu qui exercitation aute Ullamco qui occaecat minim, exercitation, cillum non, ea do. Tempor irure aliqua excepteur aliqua est fugiat, cupidatat ut. Anim quis proident magna id, veniam, duis et. Culpa aute enim, consectetur do dolor ipsum nulla in in irure? Learn more

Custom color
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[color]

<e-notification color="blue-500">
  <e-notification-title>
    Amet est ipsum sunt 
  </e-notification-title>
  <e-notification-content>
    Mollit est deserunt sed amet sed dolor, dolore nulla id. Ullamco labore aliquip occaecat elit officia. Sint excepteur labore, lorem, minim elit adipiscing sit lorem? Ex eu exercitation amet proident laborum est, sunt. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification color="blue-500">
  <e-notification-title>
    Id id quis quis 
  </e-notification-title>
  <e-notification-content>
    Dolore magna, duis reprehenderit labore quis laboris et dolor sed ea, incididunt et. Ut quis laboris non in, anim anim, culpa do consectetur. Irure amet, duis velit, exercitation in et id fugiat laboris nostrud incididunt dolore id. Do ea occaecat, culpa reprehenderit lorem, eu velit pariatur veniam. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Non exercitation in lorem Exercitation ullamco ut ut sit, qui amet, ullamco tempor laboris. Do ut dolore dolore non esse, eu mollit irure. Dolor nisi, in laboris, cillum aliqua, nostrud ut. Cillum nisi, in ipsum et reprehenderit adipiscing non magna, consequat. Learn more

Closable
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[closable]

<e-notification closable>
  <e-notification-title>
    Labore qui cillum voluptate 
  </e-notification-title>
  <e-notification-content>
    Enim, culpa, reprehenderit, sint cupidatat non in dolor in velit, duis, velit. Laborum nisi, in laborum, in adipiscing ad magna laboris ea, ullamco pariatur excepteur. Dolore est est, in exercitation nostrud, nisi occaecat deserunt elit ut pariatur eiusmod. In deserunt voluptate, ut eiusmod commodo minim lorem, duis in cillum. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification closable>
  <e-notification-title>
    Qui ut in laborum 
  </e-notification-title>
  <e-notification-content>
    Incididunt eu mollit, laboris, dolor adipiscing excepteur, officia ut duis? Tempor fugiat ut eiusmod, sint eiusmod pariatur dolore cupidatat, esse in ut. Enim sunt eu ut labore dolor. Consectetur ipsum magna qui proident nisi culpa non adipiscing proident, ut cillum, aliquip ut. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Fugiat consectetur sint excepteur Mollit, quis, adipiscing esse deserunt, officia in magna in, elit. Ad duis adipiscing dolore cupidatat occaecat nulla dolore qui. Ullamco aliqua esse mollit sint, nisi eiusmod do, consectetur in. Consequat enim, nostrud aute magna nostrud, dolore ea, anim in. Learn more

Permanently closable
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[key][closable]

<e-notification id="closable" closable key="ui:documentation:closable">
  <e-notification-title>
    Exercitation labore voluptate nisi 
  </e-notification-title>
  <e-notification-content>
    Ut non est mollit dolor ea ut. Dolor, amet do cillum mollit, do quis ut excepteur fugiat amet anim incididunt irure. Consectetur magna nostrud aliqua nostrud ullamco adipiscing velit, ipsum exercitation enim pariatur, lorem? Ullamco mollit, commodo commodo mollit laborum lorem laboris occaecat consequat. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification id="closable" closable key="ui:documentation:closable">
  <e-notification-title>
    Ad officia aliquip eu 
  </e-notification-title>
  <e-notification-content>
    Non nulla lorem amet quis labore aliquip. Ipsum aliquip, elit ut reprehenderit occaecat adipiscing eu sed non labore commodo. Magna ut veniam excepteur, ea quis mollit, laborum et minim dolor, cupidatat. Et, et ut, officia pariatur anim pariatur, anim nulla lorem. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Ullamco culpa ea reprehenderit Ut consequat in minim nulla ut, tempor ipsum qui eiusmod quis eiusmod id. Commodo laboris, aliquip excepteur, et id laboris duis cillum pariatur esse culpa officia. In reprehenderit, mollit dolor excepteur proident, culpa adipiscing, aute lorem pariatur, anim. Aliquip dolor ut in deserunt, voluptate dolore. Learn more

Types

default
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="default"]

<e-notification type="default">
  <e-notification-title>
    Ad sint anim cillum 
  </e-notification-title>
  <e-notification-content>
    Ex enim duis adipiscing, ipsum ut in, nisi excepteur nisi. Aliquip do consequat minim velit deserunt occaecat, sit adipiscing fugiat, ipsum. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification type="default">
  <e-notification-title>
    Deserunt anim eiusmod proident 
  </e-notification-title>
  <e-notification-content>
    Sed ut, sed, ut cupidatat officia consectetur minim ut et. Qui exercitation et labore anim, occaecat duis mollit in, consectetur? 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Tempor ut anim cupidatat Ut ad, dolor amet, dolor officia est sint incididunt enim veniam et irure? Id, fugiat laborum dolore reprehenderit, aliqua fugiat, laborum do dolore. Learn more

info
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="info"]

<e-notification type="info">
  <e-notification-title>
    Proident sed velit esse 
  </e-notification-title>
  <e-notification-content>
    Minim eiusmod, minim cillum laborum? Aliquip, eiusmod dolor fugiat, cupidatat exercitation incididunt incididunt, ullamco laboris. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification type="info">
  <e-notification-title>
    Quis ipsum voluptate do 
  </e-notification-title>
  <e-notification-content>
    Amet eu magna irure anim cillum consequat, minim in. In aliquip occaecat in velit qui ullamco amet incididunt nisi adipiscing. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Dolor non cupidatat ut Anim culpa excepteur fugiat cillum et dolor, dolore est ut incididunt eiusmod cupidatat? Exercitation fugiat, exercitation, occaecat amet dolore nostrud et ad. Learn more

success
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="success"]

<e-notification type="success">
  <e-notification-title>
    Irure ut cupidatat qui 
  </e-notification-title>
  <e-notification-content>
    Nisi ullamco voluptate irure occaecat eu, aliquip nulla in pariatur dolor velit. Incididunt amet, veniam sit incididunt reprehenderit nisi minim in do dolore aliquip. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification type="success">
  <e-notification-title>
    Culpa lorem aute quis 
  </e-notification-title>
  <e-notification-content>
    Officia do laboris laborum ad eu veniam excepteur est et, exercitation adipiscing ex ipsum. Incididunt irure velit non in. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
In laborum qui dolore Fugiat veniam elit ullamco do, ut, mollit, eu. Velit aliqua, fugiat magna culpa in. Learn more

warning
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="warning"]

<e-notification type="warning">
  <e-notification-title>
    Reprehenderit cupidatat sint ad 
  </e-notification-title>
  <e-notification-content>
    Commodo aliquip, in officia enim non esse cupidatat pariatur. Ea proident lorem labore, in ipsum. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification type="warning">
  <e-notification-title>
    Ea in nisi quis 
  </e-notification-title>
  <e-notification-content>
    Esse dolor, anim consectetur sint exercitation sunt deserunt voluptate. Laborum, laboris et labore? 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Deserunt elit commodo pariatur Tempor in, ipsum, sunt et consequat anim proident ullamco. Duis occaecat, proident deserunt, amet consectetur dolor. Learn more

danger
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="danger"]

<e-notification type="danger">
  <e-notification-title>
    In veniam ut commodo 
  </e-notification-title>
  <e-notification-content>
    Mollit eiusmod, consectetur id, consequat occaecat deserunt sed adipiscing dolore proident ad id, dolor ipsum? Dolor in qui lorem id duis et aliquip, in fugiat, reprehenderit. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification type="danger">
  <e-notification-title>
    Mollit amet incididunt irure 
  </e-notification-title>
  <e-notification-content>
    Quis, duis voluptate laborum voluptate, consequat tempor, fugiat? Ut, veniam culpa esse, lorem ex ipsum ea incididunt excepteur ex laboris dolor cillum laborum eu. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Pariatur sunt nostrud nostrud Dolor eu aute ullamco, labore, quis nulla do cillum, quis ex culpa lorem veniam. Dolor laborum excepteur pariatur, mollit, qui consequat? Learn more

loading
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="loading"]

<e-notification type="loading">
  <e-notification-title>
    Labore cupidatat dolor cupidatat 
  </e-notification-title>
  <e-notification-content>
    In, ipsum et in veniam deserunt dolore, magna tempor. Ut, sint laboris, in commodo est, enim ad, amet duis voluptate in? 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
<e-notification type="loading">
  <e-notification-title>
    In mollit magna proident 
  </e-notification-title>
  <e-notification-content>
    Cupidatat lorem, dolore dolor fugiat dolore enim laborum sed nulla cupidatat. Sint, reprehenderit, pariatur esse dolore sunt incididunt adipiscing in occaecat. 
  </e-notification-content>
  <e-notification-footer>
    <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
      <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
      <span class="e-helperlink__text">
        Learn more
      </span>
    </a>
  </e-notification-footer>
</e-notification>
JavaScript
Copy JavaScript
Irure consectetur aute lorem Cillum ad in exercitation, minim, reprehenderit sed cillum irure dolore reprehenderit? Ipsum esse, laboris cillum ut cillum, officia, culpa. Learn more

JavaScript Utility

openNotification
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
window.e.utils.openNotification

<div class="e-buttongroup">
  <a class="e-btn open-notification-button" id="openNotificationOnTopButton" href="#0" data-placement="top">
    Open notification on top
  </a>
  <a class="e-btn open-notification-button" id="openNotificationOnBottomRightButton" href="#0" data-placement="bottom-right">
    Open notification on right-bottom corner
  </a>
</div>
<div class="e-buttongroup">
  <a class="e-btn open-notification-button" id="openNotificationOnTopButton" href="#0" data-placement="top">
    Open notification on top
  </a>
  <a class="e-btn open-notification-button" id="openNotificationOnBottomRightButton" href="#0" data-placement="bottom-right">
    Open notification on right-bottom corner
  </a>
</div>
JavaScript
Copy JavaScript
let count = 1;

document.getElementById('openNotificationOnTopButton').addEventListener('click', event => {
  window.e.utils.openNotification({
    title: `Notification #${count++}`,
    content: 'Lorem ipsum dolor sit amet',
    buttons: [
      {
        text: 'Sint occaecat',
        icon: 'eye',
        primary: true,
        onClick: () => console.log('button clicked')
      }
    ],
    placement: 'top'
  });
});

document.getElementById('openNotificationOnBottomRightButton').addEventListener('click', event => {
  window.e.utils.openNotification({
    title: `Notification #${count++}`,
    content: 'Lorem ipsum dolor sit amet',
    buttons: [
      {
        text: 'Sint occaecat',
        icon: 'eye',
        primary: true,
        onClick: () => console.log('button clicked')
      }
    ],
    placement: 'bottom-right'
  });
});
Open notification on topOpen notification on right-bottom corner

API Reference

Properties

NameDescriptionTypeRequiredDefault value
typeDetermines the color and icon of the notification.'default' | 'info' | 'success' | 'warning' | 'danger' | 'loading'default
iconDetermines the icon of the notification.string
colorDetermines the color of the title and the icon. It can be a named color (e.g. 'info') or a base color and shade (e.g. 'blue-400'). It works only if type is default.string-
closableMakes the notification closable. Closed notification won't appear anymore.booleanfalse
keyAn identifier for storing closed state. It should be unique.string

Method

NameDescription
close()Close the notification.

Events

EventDescriptionReturns
appearFires when the component rendered{ detail: { component: [as object] } }
closeFires on close

JavaScript API Reference

Method

NameDescription
window.e.utils.openNotification({ content, title, type, icon, color, helperLink, buttons, closable, autoClose, placement })Opens notification on top window.
Rerturns a { close } object, where close is a function that closes the notificatoin.

Parameters

NameDescriptionTypeRequiredDefault value
contentThe content of the confirmation dialog. If string is given, it will be rendered as text.string | objecttrue
content.typeDecides whether the content will be rendered as text or html.'text' | 'html'true
content.templateThe content of the confirmation dialog.stringtrue
titleThe text content of the title.string-
typeThe type of the notification. See details above.stringdefault
iconThe icon of the notification. See details above.string-
colorThe color of the notification. See details above.string-
helperLinkShows a helper link in the footer.object-
helperLink.textThe text content of the helper link.stringtrue
helperLink.hrefThe href of the helper link.stringtrue
buttonsShows buttons in the footer.array
buttons[].textThe text content of the button.stringtrue
buttons[].iconThe icon of the button.string-
buttons[].primaryIf true, the button will be primary.booleanfalse
buttons[].onClickA callback function that will be called when the button is clicked.function-
closableMakes the notification closable.booleantrue
autoCloseIf true, the notification will disappear after 5 seconds.booleanfalse
placementThe placement of the notification.'top' | 'bottom-right''top'

Related components

sidepanel