prism-announce | Vaadin

Web component based on Polymer 2. Provide a message display container with material design.

[ This description is mirrored from at on 2019-05-10 ]


<prism-announce> is a Polymer 2 element provides simple yet fully customisable notifications.


Place <prism-announce> in your application, and design how content message appears. Use <prism-announce-toast> and <prism-announce-notification> for toast and notification in material desgin.

<prism-announce top right>
            .notification {
                background-color: #cfcfcf;
                border: 1px solid grey;
                padding: 7px;
                margin: 5px;
                display: flex;
                justify-content: space-between;
        <div class="notification">
            <span>Hello [[name]] at [[postTime]]</span> &nbsp;
            <button on-click="closeMessage">Close</button>

To announce a message, simply fire an announce event and assign content as a detail object.

element.dispatchEvent(new CustomEvent('announce', {
    bubbles: true,
    composed: true,
    detail: {
        postTime: new Date().toLocaleString()


<prism-announce> provides the following custom properties and mixins for styling:

Custom property Description Default
--var-prism-announce Mixin applied to the element {}


MIT Licence


Link to this version
TestedReleased 20 July 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 2.0.0