Floating layers and status feedback
Dialogs, drawers, tips, notifications, and action feedback.
Modal Dialog
Accessible confirmation dialog implemented with the native dialog element.
Open and runDocument Review Confirmation Dialog
Complete a confirmation dialog for a document review scenario: include real content, operable controls, clear state feedback, and a responsive layout across sizes.
Open and runDocument Review Side Drawer
Complete a side drawer for the document review scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runDocument review message stack
In a document review scenario, complete a message toast stack: includes real content, actionable controls, clear status feedback, and multi-size layouts.
Open and runDocument Review Help Popover
Complete a help popover for a document review scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runDocument Review Keyboard Tooltip
Keyboard tooltip completed in a document review scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runDocument Review Status Banner
Complete a status banner for a document review scenario, with real content, interactive controls, clear status feedback, and responsive layouts.
Open and runDocument Review Notification Center
Complete the notification center in the document review scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runDocument Review Context Actions
Complete a contextual actions form for a document review scenario: include real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runDocument Review Bottom Action Panel
Complete a bottom action sheet in the document review scenario: include real content, interactive controls, clear status feedback, and a cross-size layout.
Open and runDocument Review Progress Overlay
A progress blocker for document review scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runTask Center Confirmation Dialog
Complete the confirmation dialog in a task-center scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runTask Center Side Drawer
Complete a side drawer in a task center scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runTask Center Notification Stack
Complete a toast stack for a task center scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runTask Center Help Popover
Build a help popover for a task center scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runTask Center Keyboard Tooltip
Complete the keyboard tooltip for a task center scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runTask Center Status Banner
Complete the status banner in the task center scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runTask Center Notification Center
Complete a notification center for a task center scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runTask Center Context Actions Form
Complete a contextual action sheet in the task center scenario: includes real content, actionable controls, clear status feedback, and layouts across sizes.
Open and runTask Center Bottom Action Panel
In the task center scenario, complete a bottom action sheet: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runTask Center Progress Blocker
Complete a progress blocker in a task center scenario: include real content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and runPhoto Library Confirmation Dialog
Create a confirmation dialog for a photo library scenario: include real content, operable controls, clear status feedback, and a responsive layout across sizes.
Open and runPhoto Library Side Drawer
Complete the side drawer scenario for the photo library, including real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runPhoto library message toast stack
Complete the notification toast stack for a photo library scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.
Open and runPhoto Library Help Popover
Complete a help popover in a photo library scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.
Open and runPhoto library keyboard tooltip
Complete a keyboard tooltip in a photo library scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runPhoto Library Status Banner
Status banner for a photo library scenario: real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runPhoto Library Notification Center
Complete a notification center in a photo library scenario: includes real content, interactive controls, clear status feedback, and cross-size layout.
Open and runPhoto Library Context Actions
In the photo library scenario, complete a contextual actions sheet: including real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runAccount Security Bottom Action Sheet
Complete a bottom action sheet for the account security scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runCare reminder progress overlay
Complete a progress overlay in a care reminder scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runCheck-in desk status banner
Complete a status banner in a check-in desk scenario: includes realistic content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and runOutpatient Reminder Confirmation Dialog
Complete a confirmation dialog for an outpatient alert scenario: includes real content, interactive controls, clear state feedback, and responsive layout across sizes.
Open and runClinic Action Sheet Context Actions
Complete a contextual action sheet for the clinic action sheet scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runOutpatient Reminder Room Help Popover
Complete a help popover for the clinic reminder room scenario: include realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.
Open and runOutpatient Check-in Bell Bottom Action Panel
Complete the bottom action panel in a clinic check-in bell scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runOutpatient Confirmation Card Notification Center
Complete a notification center for the outpatient confirmation card scenario: include real content, interactive controls, clear status feedback, and cross-size layouts.
Open and runOutpatient Proofreading Note Progress Overlay
Complete a progress blocker for an outpatient proofing note scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runOutpatient Review Desk Side Drawer
Complete the side drawer for a clinic review desk scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runOutpatient Support Bar Keyboard Tooltip
Complete a keyboard tooltip in a clinic support banner scenario: including real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runClinic Update Toast Stack
Completed message stack for the outpatient update window scenario: includes real content, actionable controls, clear status feedback, and cross-size layout.
Open and runDelivery Status Banner
Complete a status banner for delivery updates: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runGallery action sheet confirmation dialog
Complete the confirmation dialog in a gallery operation-sheet scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.
Open and runGallery Alert Room Context Actions Sheet
Complete the contextual action sheet in the gallery alert room scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runGallery check-in bell help popover
Complete a help popover in a gallery check-in bell scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.
Open and runGallery Confirmation Card Bottom Action Panel
Complete the bottom sheet in the gallery confirmation card scenario: includes real content, interactive controls, clear state feedback, and responsive layout.
Open and runGallery Proof Notification Center
Complete the Notification Center in a gallery proofing scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runGallery proof note progress mask
Completed a progress blocker for a gallery proof note scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.
Open and runGallery Review Desk Side Drawer
Complete a side drawer for a gallery review desk scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runGallery Support Row Keyboard Tooltip
Complete the keyboard tooltip in a gallery support bar scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.
Open and runGallery update window notification stack
Complete a toast stack in a gallery update window scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runGreenhouse inspection status banner
Complete a status banner for a greenhouse inspection scenario: include realistic content, actionable controls, clear status feedback, and cross-size layouts.
Open and runGrant Review Confirmation Dialog
Complete the confirmation dialog in a grant review scenario: includes realistic content, actionable controls, clear status feedback, and layouts that adapt across sizes.
Open and runLab alert contextual action sheet
Complete a contextual action sheet in an lab alert scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout.
Open and runCourse tip help popover
Complete a help popover in a lesson tip scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts.
Open and runMedia queue bottom action panel
Complete a bottom action sheet for a media queue scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMeeting Operations Notification Center
Complete a notification center for a meeting operations scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runMembership Center Progress Overlay
Build a progress overlay in a membership center scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.
Open and runMentor action sheet side drawer
Complete a side drawer for the mentor action-sheet scenario, including real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runMentor Reminder Room Keyboard Tooltip
Complete the keyboard tooltip in the mentor alert room scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.
Open and runMentor check-in bell toast stack
Complete the message notification stack for the mentor check-in bell scenario: include real content, interactive controls, clear state feedback, and cross-size layouts.
Open and runMentor confirmation card status banner
Complete a status banner in a mentor confirmation card scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runMentor Annotation Confirmation Dialog
Complete a confirmation dialog in a mentor annotation scenario: include real content, interactive controls, clear status feedback, and a responsive layout across sizes.
Open and runMentor Proof Note Context Actions
Complete a contextual action form for a mentor proof note scenario: include real content, actionable controls, clear status feedback, and responsive layouts.
Open and runMentor Review Desk Help Popover
Complete a help popover in a mentor review desk scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.
Open and runMentor Support Strip Bottom Action Panel
Build a bottom action sheet for a mentor support banner scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.
Open and runMentor Update Window Notification Center
Complete a notification center in a mentor update window scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Open and runApproval Action Sheet Progress Blocker
Complete the progress blocker in an approval form scenario: includes real content, interactive controls, clear state feedback, and responsive layout.
Open and runApproval reminder room side drawer
Complete the side drawer for an approval reminder room scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.
Open and runApproval Check-In Bell Keyboard Tooltip
Completed the keyboard tooltip in the approval check-in bell scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.
Open and runApproval Confirmation Card Message Toast Stack
Complete the notification stack for the approval confirmation card scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.
Open and run