HTML structure
dialog (dialog--success / dialog--warning / dialog--error)
├── dialog__icon (optional)
├── dialog__main
│ ├── other BEM component
dialog (dialog--success / dialog--warning / dialog--error)
├── dialog__icon (optional)
├── dialog__main
│ ├── other BEM component
This is a standard dialog. It can be used to convey simple information to users, such as: 'Welcome to your dashboard'
This is a standard dialog with an inline svg icon. It can be used to convey simple information to users, such as: 'Did you know..'.
This is a dialog with a success modifier and an inline svg icon. It can be used to display a positive message, such as: 'Your order is confirmed'.
This is a dialog with a warning modifier and an inline svg icon. It can be used to display a warning message, such as: 'This order is not yet confirmed'.
This is a dialog with an error modifier and an inline svg icon. It can be used to display an error message, such as: 'Your order could not be processed'.