Toast
Examples
Usage
The toast notification is generally used as a result of a direct user interaction.
Do
- Include a single action button
- Keep the text within the notication short (ideally within a single line)
- Display one toast notification at a time on the screen (older notifications should fade out quickly for new notifications to appear)
Don't
- Use "Dismiss" or "Cancel" as the call to action
- Include task-related icons within the toast
- Include hyperlinks
- Use Toast directly. Use the Global Messages service instead:
From an Azure DevOps extensions:
import * as SDK from "azure-devops-extension-sdk";
import { CommonServiceIds, IGlobalMessagesService } from "azure-devops-extension-api";
const globalMessagesSvc = await SDK.getService<IGlobalMessagesService>(CommonServiceIds.GlobalMessagesService);
globalMessagesSvc.addToast({
callToAction: "Learn more",
duration: 2000,
message: "This is a toast from an extension",
onCallToActionClick: this.onCallToActionClick
});
Anatomy
Message
The main part of the toast notification. Do keep the UI text short, and avoid making it multiline. Do not include hyperlinks.
Multi-line message
For messages that don't fit a single line, the area auto-expands.
Call to action
Each toast notification may contain a single action button, neither of which may be “Dismiss” or “Cancel.”
Long call to action
A longer call to action (more than 120px wide) gets placed in its own row.
Placement
Toast notifications animate upwards from the bottom edge of the screen, and slowly fade out as their time expire.
Only one toast notification should be displayed at a time. If a notification is still visible in the screen, it should quickly fade out so the new notification shows up.
Accessibility
Toast notifications that have a call to action support a keyboard shortcut to move focus to the call to action. You can quickly jump there by pressing Ctrl + Alt + T.