Pattern Lab

Warning

Try toaster message by clicking the button below this message

I'm the hidden warning message

HTML

									
										
<div class="msg-warning toast-container">
	<p>Try toaster message by clicking the button below this message</p>

	<div class="msg-toast is-hidden"> <i class="om-exclamation_circle toast-icon"></i><p>I'm the hidden warning message</p><i class="icon-close"></i></div>
	<button id="warning" class="toast-trigger warning">Button</button>
</div>

Info

Try toaster message by clicking the button below this message

I'm the hidden info message

HTML

									
										
<div class="msg-info toast-container">
	<p>Try toaster message by clicking the button below this message</p>

	<div class="msg-toast is-hidden"> <i class="om-info_circle toast-icon"></i><p>I'm the hidden info message</p><i class="icon-close"></i></div>
	<button id="info" class="toast-trigger info">Button</button>
</div>

Success

Try toaster message by clicking the button below this message

I'm the hidden success message

HTML

									
										
<div class="msg-success toast-container">
	<p>Try toaster message by clicking the button below this message</p>

	<div class="msg-toast is-hidden"> <i class="icon-ok inverse toast-icon"></i><p>I'm the hidden success message</p><i class="icon-close"></i></div>
	<button id="success" class="toast-trigger success">Button</button>
</div>

Error

Try toaster message by clicking the button below this message

I'm the hidden error message

HTML

									
										
<div class="msg-error toast-container">
	<p>Try toaster message by clicking the button below this message</p>

	<div class="msg-toast is-hidden"> <i class="icon-error inverse toast-icon"></i><p>I'm the hidden error message</p><i class="icon-close"></i></div>
	<button id="error" class="toast-trigger error">Button</button>
</div>