Snackbar
The snackbar component, prefixed by gds-snackbar
, is used to quickly display user feedback, warnings and errors.
To hide a notification, add gds-snackbar__notification--hidden
to it.
<ul className="gds-snackbar">
<li className="gds-snackbar__notification">
<p className="gds-snackbar__notification-text">Some text goes here.</p>
<button className="gds-snackbar__notification-button"></button>
</li>
<li className="gds-snackbar__notification">
<p className="gds-snackbar__notification-text">Some text goes here.</p>
<button className="gds-snackbar__notification-button"></button>
</li>
</ul>
Optional classes:
gds-snackbar__notification--success
gds-snackbar__notification--info
gds-snackbar__notification--warning
gds-snackbar__notification--danger
gds-snackbar__notification--hidden
gds-snackbar__notification-button--dark
gds-snackbar__notification-button--success
gds-snackbar__notification-button--info
gds-snackbar__notification-button--warning
gds-snackbar__notification-button--danger