Snackbar

Demo

Placement

Code

<mdc-snackbar-host id="host-center" placement="bottom-center"></mdc-snackbar-host>

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
    <button onclick="document.querySelector('#host-center').show({ message: 'Single line message', action: 'Action' })">
        Show Bottom Center
    </button>
    <button onclick="document.querySelector('#host-center').show({ message: 'Error message occurred', variant: 'error', hasCloseIcon: true })">
        Show Error Snackbar
    </button>
    <button onclick="document.querySelector('#host-center').show({ message: 'First in queue', duration: 'short' }); document.querySelector('#host-center').show({ message: 'Second in queue (auto-sequential)', duration: 'short' });">
        Trigger 2 Queued Snackbars
    </button>
</div>

Action

Code

<style>
    .demo-container {
        position: relative;
        height: 300px;
        padding: 16px;
    }
</style>

<div class="demo-container">
    <mdc-snackbar open duration="indefinite">
        <span>Message with action</span>
        <button slot="action">Undo</button>
    </mdc-snackbar>
</div>

Animation Mode

Code

<style>
    .demo-container {
        position: relative;
        height: 400px;
        padding: 16px;
    }
</style>

<div class="demo-container">
    <mdc-snackbar open animation-mode="slide" duration="indefinite">
        <span>Slide animation mode</span>
        <button slot="action">Action</button>
    </mdc-snackbar>
</div>

Duration

Code

<style>
    .demo-container {
        position: relative;
        height: 300px;
        padding: 16px;
    }
</style>

<div class="demo-container">
    <mdc-snackbar open duration="indefinite">
        <span>Short duration snackbar</span>
    </mdc-snackbar>
</div>

Multiline

Code

<style>
    .demo-container {
        position: relative;
        height: 400px;
        padding: 16px;
    }
</style>

<div class="demo-container">
    <mdc-snackbar open multiline duration="indefinite">
        <span>This is a multiline snackbar message that can wrap to multiple lines when the content is too long for a single line. It supports longer text content.</span>
        <button slot="action">Action</button>
    </mdc-snackbar>
</div>

Variant

Code

<style>
    .demo-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .demo-item {
        position: relative;
    }
</style>

<div class="demo-container">
    <div class="demo-item">
        <mdc-snackbar open variant="surface" duration="indefinite">
            <span>surface</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="inverse-surface" duration="indefinite">
            <span>inverse-surface</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="primary" duration="indefinite">
            <span>primary</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="secondary" duration="indefinite">
            <span>secondary</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="tertiary" duration="indefinite">
            <span>tertiary</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="error" duration="indefinite">
            <span>error</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="primary-container" duration="indefinite">
            <span>primary-container</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="secondary-container" duration="indefinite">
            <span>secondary-container</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="tertiary-container" duration="indefinite">
            <span>tertiary-container</span>
        </mdc-snackbar>
    </div>

    <div class="demo-item">
        <mdc-snackbar open variant="error-container" duration="indefinite">
            <span>error-container</span>
        </mdc-snackbar>
    </div>
</div>