granite-alarmlight | Vaadin

A green-amber-red status indicator custom element

Published on


A green-amber-red status indicator custom element


<granite-alarmlight status="1"></granite-alarmlight>
<granite-alarmlight status="0"></granite-alarmlight>
<granite-alarmlight status="-1"></granite-alarmlight>
<granite-alarmlight status="1" linear></granite-alarmlight>
<granite-alarmlight status="0.75" linear></granite-alarmlight>
<granite-alarmlight status="0.5" linear></granite-alarmlight>
<granite-alarmlight status="0.25" linear></granite-alarmlight>
<granite-alarmlight status="0" linear></granite-alarmlight>
<granite-alarmlight ok="-1.0" warn="0.0" ko="1.0" status="0.75" linear></granite-alarmlight>
<granite-alarmlight ok="-10.0" warn="0.0" ko="10.0" status="7.5" linear></granite-alarmlight>

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.


Link to this version
ImportedReleased 21 September 2018MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @granite-elements/granite-alarmlight"@2.1.4"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.1.4


  • @polymer/polymer#^3.0.0