Lists Others Tabs

Snackbar (snackbar)

Snackbars provide brief messages about app processes at the bottom of the screen.

🔗 External documentation.

ID Label Description Schema
label Label The snackbar label
button Button Renderable button component.
role Role https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles 
                        type: string
enum:
    - log
    - status
    - alert

                      
            id: snackbar
label: Snackbar
description: 'Snackbars provide brief messages about app processes at the bottom of the screen. '
homepage: 'https://m2.material.io/develop/web/components/snackbars'
variants:
    default:
        id: default
        label: Default
    stacked:
        id: stacked
        label: Stacked
        description: 'Positions the action button/icon below the label instead of alongside it.'
    leading:
        id: leading
        label: Leading
        description: 'Displayed on the leading edge of the screen.'
slots:
    label:
        id: label
        label: Label
        description: 'The snackbar label'
    button:
        id: button
        label: Button
        description: 'Renderable button component.'
props:
    role:
        id: role
        label: Role
        description: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles'
        schema:
            type: string
            enum:
                - log
                - status
                - alert
library:
    js:
        'https://data.dilla.io/material_2/components/snackbar/snackbar_init.js': {  }
    id: snackbar
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': snackbar
            label: 'Try again :)'
            button:
                '@component': button
                label: Retry
                url: '#'
            role: log

Default ( default )

Try again :)
Retry
<div class="mdc-snackbar"> <div class="mdc-snackbar__surface"> <div class="mdc-snackbar__label" role="log" aria-live="polite">Try again :)</div> <div class="mdc-snackbar__actions"> <a class="mdc-snackbar__action mdc-button" href="#"> <span class="mdc-button__label">Retry</span> </a> </div> </div> </div>

Stacked ( stacked )

Positions the action button/icon below the label instead of alongside it.

Try again :)
Retry
<div class="mdc-snackbar--stacked mdc-snackbar"> <div class="mdc-snackbar__surface"> <div class="mdc-snackbar__label" role="log" aria-live="polite">Try again :)</div> <div class="mdc-snackbar__actions"> <a class="mdc-snackbar__action mdc-button" href="#"> <span class="mdc-button__label">Retry</span> </a> </div> </div> </div>

Leading ( leading )

Displayed on the leading edge of the screen.

Try again :)
Retry
<div class="mdc-snackbar--leading mdc-snackbar"> <div class="mdc-snackbar__surface"> <div class="mdc-snackbar__label" role="log" aria-live="polite">Try again :)</div> <div class="mdc-snackbar__actions"> <a class="mdc-snackbar__action mdc-button" href="#"> <span class="mdc-button__label">Retry</span> </a> </div> </div> </div>