Toast

Toast notices, sometimes called snackbars, are time-based messages that appear based on the user or other users actions. They contain at-a-glance information about outcomes. Sometimes they are paired with actions.

Breakdown

Toast messages have a content area, icon, message, and possibly metadata. They are placed within a wrapper.

Styles

Chat

Shane Holmes, 12:26pm

Hey everyone, how was your weekend?

.example-toast-wrapper {
    .d-toast-wrapper();
}
.example-toast--{{ name }} {
    .d-toast--{{ name }}();
}
.example-toast__icon--{{ name }} {
    .d-toast__icon--{{ name }}();
}

Viewing

Annie Wu is viewing this call.

.example-toast-wrapper {
    .d-toast-wrapper();
}
.example-toast--{{ name }} {
    .d-toast--{{ name }}();
}
.example-toast__icon--{{ name }} {
    .d-toast__icon--{{ name }}();
}

Info

Voice Intelligence has been turned on for this call.

.example-toast-wrapper {
    .d-toast-wrapper();
}
.example-toast--{{ name }} {
    .d-toast--{{ name }}();
}
.example-toast__icon--{{ name }} {
    .d-toast__icon--{{ name }}();
}

Error

We were unable to send invites. Please try again.

.example-toast-wrapper {
    .d-toast-wrapper();
}
.example-toast--{{ name }} {
    .d-toast--{{ name }}();
}
.example-toast__icon--{{ name }} {
    .d-toast__icon--{{ name }}();
}

Success

Invites sent to Fred Schmidt, Freda Clarkson, and 1 other.

.example-toast-wrapper {
    .d-toast-wrapper();
}
.example-toast--{{ name }} {
    .d-toast--{{ name }}();
}
.example-toast__icon--{{ name }} {
    .d-toast__icon--{{ name }}();
}

Organizer

Isabell Gomez is now a co-host.

.example-toast-wrapper {
    .d-toast-wrapper();
}
.example-toast--{{ name }} {
    .d-toast--{{ name }}();
}
.example-toast__icon--{{ name }} {
    .d-toast__icon--{{ name }}();
}