Display empty states

[ This description is mirrored from README.md at github.com/petja/paper-empty-state on 2019-05-22 ]

Empty state

Published on webcomponents.org

Element automatically observers array given to it and shows empty state whenever the array is empty. And when array gets its contents, we'll automatically switch to your custom HTML. However, you can also use this element standalone without any arrays, then we just show empty state always.


Customize text and the icons

<paper-empty-state text="Hello world" icon="backup"></paper-empty-state>

Automatically toggle empty state

  • Array without contents, shows an empty state
  • Array with contents, shows your custom HTML
<paper-empty-state items="[]">Custom content</paper-empty-state>
<hr />
<paper-empty-state items="['a', 'b', 'c']">Custom content</paper-empty-state>


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


MIT License

Checkout LICENSE file


Link to this version
TestedReleased 17 May 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.0



  • PolymerElements/iron-icon#2.0-preview
  • PolymerElements/iron-icons#2.0-preview