Flash message (notification) components with Tailwind CSS
Rails Designer’s NotificationComponent works tightly with Rails’ flash mechanism. Allowing you to show simple text messages to more advanced notifications that include actions. This component works a bit different as configuration is done by adding attributes to the flash object, eg. flash[:notice] {message: 'Password change successful'}. Position of the notification can be any of the four corners. Have an action that takes some time? Show a spinner or a progress bar to indicate the remaining running time.
- Integrates with Rails' flash mechanism
-
Basic
Get this component-
Password change successful
-
-
Basic with icon
Get this component-
Backup completed, but with warnings
-
-
Basic with icon and description
Get this component-
Upload Failed: 'image.png'
The upload of 'image.png' was unsuccessful. Please try again or check your file format.
-
-
Basic with icon and dark theme
Get this component-
Profile update confirmed
-
-
With button, horizontal
Get this component-
File 'report.docx' uploaded successfully
-
-
With link, horizontal
Get this component-
File 'report.docx' uploaded successfully
-
-
With two buttons, vertical
Get this component-
New tutorial
'Getting Started with Rails Designer' was just added
-
-
With two buttons, horizontal
Get this component-
Suspicious Login Attempt
We've prevented a login from an unrecognized source.
-
-
With two links, horizontal
Get this component-
Suspicious Login Attempt
We've prevented a login from an unrecognized source.
-
-
Undoable action (for 10 seconds)
Get this component-
Your message was deleted
-
-
Infinite, with spinner indicator
Get this component-
Just a second, we’re finalizing things
-
-
With loading indicator (for 30 seconds)
Get this component-
Setting things up for you… almost there!
-