Snackbar
Overview
Snackbar is a lightweight feedback component used to display brief messages about system status or user actions.
The Snackbar component supports four types:
-
Information
-
Successful
-
Warning
-
Error
Information
The Information snackbar is used to display neutral or informative messages.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Successful
The Successful snackbar confirms that an action has been completed successfully.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Warning
The Warning snackbar alerts users to potential issues or situations that may require attention.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Error
The Error snackbar informs users that an action has failed or cannot be completed.
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ Snackbars appear temporarily and should not block user interaction.
✨ Messages should be concise, clear, and easy to understand at a glance.
✨ Use the correct snackbar type to match the message severity.
✨ Avoid stacking multiple snackbars at the same time.
✨ Snackbars should disappear automatically after a short duration.
✨ Do not use snackbars for critical information that requires mandatory user action.
Figma
All details and specifications in the design can be referenced through the Figma link below.