diff --git a/react/components/Alert/README.md b/react/components/Alert/README.md index c1c0a126b..df47f24c4 100755 --- a/react/components/Alert/README.md +++ b/react/components/Alert/README.md @@ -14,47 +14,59 @@ For low-priority notification prefer a Toast. +## Examples + +The **Alert** component can be used in **Success**, **Warning** and **Error** scenarios. + +### Success +Use this when the user's action had a successful outcome. + ```js -
-
- console.log('Closed!')}> - Your action was complete. - -
+ console.log('Closed!')}> + Your new product was created with success. + +``` -
- console.log('Closed!')}> - This action is irreversible. - -
-
- console.log('Closed!')}> - This is a large Alert. Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur - sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. - -
-
- console.log('Closed!')}> - You can't delete this item. - -
-
- console.log('Went back!') }} - onClose={() => console.log('Closed!')}> - You can't delete this item. - -
-
+### Warning +Use this when user needs to know about some important info before taking any decision. + +```js + console.log('Closed!')}> + Proceed with caution. Deleting this promotion is irreversible. + +``` + +### Error +Use this when something went wrong after performing an action. + +```js + console.log('Closed!')}> + You can't delete this product. + +``` + +### Large texts +You can insert large amounts of text in an Alert. However, try to be as concise and clear as possible, as you are helping your user to understand what happened. + +```js + console.log('Closed!')}> + Changes you make in your product info can take at least two hours to be updated in all of your channels. Please take this into consideration before making any changes. + +``` + +### Actions +You can associate an action to an Alert. + +```js + console.log('Went back!') }} + onClose={() => console.log('Closed!')}> + You don't have permission to change this Payment Method. + ``` -Using ref +### Using ref ```js const Button = require('../Button').default @@ -64,7 +76,7 @@ const alertRef = React.createRef() console.log('Closed!')}> Click on the button below to focus on (scroll to) the alert -
+