nega-toast
Basic demo
<![CDATA[
<button onclick="this.nextElementSibling.toggle()">Toggle Toast</button>
<nega-toast>Hi</nega-toast>
]]>
Closable nega-toast demo
<![CDATA[
<button onclick="this.nextElementSibling.open()">Open</button>
<nega-toast><button onclick="this.parentElement.close()">Close</button></nega-toast>
]]>
Auto close nega-toast demo
Closing in 1 second...
<![CDATA[
<button onclick="this.nextElementSibling.open()">Open</button>
<nega-toast duration="1000">Closing in 1 second...</nega-toast>
]]>
Styled demo
Green
Yellow
Compact
Pill
<![CDATA[
<button onclick="this.nextElementSibling.open()">Green</button>
<nega-toast class="green" duration="1000">Green</nega-toast>
<button onclick="this.nextElementSibling.open()">Yellow</button>
<nega-toast class="yellow" duration="1000">Yellow</nega-toast>
<button onclick="this.nextElementSibling.open()">Compact</button>
<nega-toast class="compact" duration="1000">Compact</nega-toast>
<button onclick="this.nextElementSibling.open()">Pill</button>
<nega-toast class="pill" duration="1000">Pill</nega-toast>
]]>