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

Demo

Some text goes here.
Some text goes here.

    <div style={{position: "relative", height: 200, width: "100%"}}>
    {/* The snackbar is fixed position by default. */}
    {/* Ignore the inline styles, these were added for demo purposes */}
    <ul className="gds-snackbar" style={{position: "absolute", top: "1rem"}}>
    <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>
</div>


    <div style={{position: "relative", height: 200, width: "100%"}}>
    {/* The snackbar is fixed position by default. */}
    {/* Ignore the inline styles, these were added for demo purposes */}
    <ul className="gds-snackbar" style={{position: "absolute", top: "1rem"}}>
    <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>
</div>

Error Log

Required

gds-snackbar

gds-snackbar__notification

gds-snackbar__notification-text

Display

gds-snackbar__notification--hidden

Add On

gds-snackbar__notification-text

gds-snackbar__notification-button

Context (Color)

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