Slack - Error States
We analyzed 8 examples of how Slack handles error states across their product, spanning 4 different approaches: inline validation, modal dialog, in-context error, banner notification.
Inline Validation
Slack — Directories > User groups > Create user group modal
Create user group modal with invalid characters entered in the Handle field, triggering inline validation
Slack — Directories > People > Invite people to New Workspace modal
Invite people modal showing an invalid email address entered in the To field with inline validation error
Slack — #social channel > Create a channel modal
Create a channel modal with a duplicate channel name entered, showing inline validation that the name is already taken
Modal Dialogs
Slack — Direct messages > File upload
Modal dialog informing the user that the file type they attempted to upload is not supported by Slack
Slack — Profile > Change profile photo modal
Profile photo upload modal showing an error when the user selects an unsupported image format
Banner Notifications
Slack — #social channel > Huddle
Yellow warning banner at the bottom of the screen indicating the user's huddle connection was lost while in the #social channel
In-Context Errors
Slack — Direct messages > Jan Haaland (self)
No internet connection state showing both a toast notification in the top-right corner and an in-context empty state in the message area, plus inline text below the composer
Slack — Preferences > Audio and video
Preferences modal on Audio and video settings showing a camera permission denied warning banner within the settings panel