{"id":29413709,"url":"https://github.com/odutra-dev/awesome-alert","last_synced_at":"2026-04-16T09:31:08.953Z","repository":{"id":172116189,"uuid":"538541052","full_name":"odutra-dev/awesome-alert","owner":"odutra-dev","description":"Open source javascript library to create awesome alerts in your projects.","archived":false,"fork":false,"pushed_at":"2022-10-26T14:35:51.000Z","size":52,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-05T02:02:10.402Z","etag":null,"topics":["alert","css","html-css-javascript","js","lib","library","open-source"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odutra-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-09-19T14:25:15.000Z","updated_at":"2023-01-11T00:05:57.000Z","dependencies_parsed_at":"2024-01-13T14:49:00.254Z","dependency_job_id":"87395562-6134-466c-90b8-6dfcb261d77f","html_url":"https://github.com/odutra-dev/awesome-alert","commit_stats":null,"previous_names":["dutragames/awesome-alert","odutra-dev/awesome-alert"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/odutra-dev/awesome-alert","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odutra-dev%2Fawesome-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odutra-dev%2Fawesome-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odutra-dev%2Fawesome-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odutra-dev%2Fawesome-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odutra-dev","download_url":"https://codeload.github.com/odutra-dev/awesome-alert/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odutra-dev%2Fawesome-alert/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260166100,"owners_count":22968631,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","css","html-css-javascript","js","lib","library","open-source"],"created_at":"2025-07-11T11:37:17.364Z","updated_at":"2026-04-16T09:31:03.915Z","avatar_url":"https://github.com/odutra-dev.png","language":"JavaScript","readme":"# **Awesome-Alert**\n\nI created this JS library as an open source project.\n\nto provide beautiful alert box messages made with just HTML, CSS and JS.\n\nFeel free to contribute a pull request or suggestions. Because the community that uses it is the same that contributes!\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/69097449/192541528-3826306e-c183-460a-b388-e2fe72f14a02.gif\" alt=\"AlertGif\"/\u003e\n\u003c/p\u003e\n\n## **Installation Instructions**\n\n* Clone this repository in your project's lib folder or download the JS and CSS files.\n\n* Import \"style.css\" and \"awesomeAlert.js\" into your code as described below:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cscript defer src=\"libs/awesome-alert/awesomeAlert.js\"\u003e\u003cscript\u003e\n        \u003clink rel=\"stylesheet\" href=\"libs/awesome-alert/style.css\"\u003e\n    \u003c/head\u003e\n\u003c/html\u003e\n```\n\n## **Usage**\n\nTo use the library, simply select a button and call the ```awesomeAlert()``` function. Like the example below:\n\n```js\nconst btnSuccess = document.querySelector('.show-Success')\nbtnSuccess.addEventListener('click', () =\u003e{\n    awesomeAlert({\n        type: 'success',\n        title: 'Success!',\n        message: 'Successful action!',\n        img: 'imgs/success.svg',\n        buttonOK: 'Done!',\n    })\n})\n```\n\nIf you want to use the ```Question```, just follow the example below:\n\n```js\nconst btnQuestion = document.querySelector('.show-Question')\nbtnQuestion.addEventListener('click', () =\u003e{\n    awesomeAlert({\n        type: 'question',\n        title: 'Do you like cats?',\n        message: 'Could you answer me?',\n        img: 'imgs/question.svg',\n        buttonConfirm: 'Yes',\n        buttonCancel: 'No',\n        closeStyle: 'circle'\n    })\n})\n```\n\nIf you want to receive written information from the user, use `input`. as below:\n\n```js\nconst btnInput = document.querySelector('.show-Input')\nbtnInput.addEventListener('click', () =\u003e{\n    awesomeAlert({\n        type: 'input',\n        title: 'What is your name?',\n        placeholderInput: 'Gabriel Dutra'\n        img: 'imgs/input.svg',\n        buttonOK: 'Submit',\n        closeStyle:  'circle'  \n    })\n})\n```\n\nIf you are interested in using a non-default alert, I recommend using `custom`. This will give you greater color freedom for your awesome alert! Example below:\n\n```js\nconst btnCustom = document.querySelector('.show-Custom')\nbtnCustom.addEventListener('click', () =\u003e{\n    awesomeAlert({\n        type: 'custom',\n        title: 'You can start?',\n        message: 'The game is just catching the balls.',\n        bgColor: '#23a5c8',\n        img: 'imgs/custom.svg',\n        buttonOK: 'GO!',\n        closeStyle:  'circle'  \n    })\n})\n```\n\n## **Promise**\n\nThe function returns a promise, which returns the user's action.\n\nWith this return, you can use the ```then``` method to show something to the user.\n\n```js\nconst btn = document.querySelector('#Show')\n\nbtn.addEventListener('click', () =\u003e {\n    awesomeAlert({\n        type: 'error',\n        title: 'Error',\n        message: 'Error in System!',\n        img: './imgs/error.svg',\n        closeStyle: 'circle'\n    })\n    .then(a =\u003e alert(a))\n})\n```\n\n![image](https://user-images.githubusercontent.com/69097449/191557290-58842d0a-00ee-40ad-92a4-948778206d29.png)\n\nThis can be very useful to know what your app/website user did when they saw your alert.\n\n## **Props Alert**\n\n| Name | type | Default | Description |\n:--------- | :--------- | :--------- | :--------- |\n| ```title```  | ```string``` | ```\"Success\"``` | Will be the alert title. |\n| ```message``` | ```string``` | ```\"Success action\"``` | Will be the alert message. |\n| ```buttonConfirm``` | ```string``` | ```'Confirm!'``` | This will appear on the Confirm button. |\n| ```buttonCancel``` | ```string``` | ```'Cancel.'``` | This will appear on the Cancel button. |\n| ```buttonOK``` | ```string``` | ```'OK!'``` | It will be what will appear on the OK button. |\n| ```img``` | ```string``` | ```\"\"``` | It will be the image that will appear to the user. Enter the path to access the image. |\n| ```type``` | ```string``` | ```\"success\"``` | Will define what type of alert will be shown. |\n| ```closeStyle``` | ```string``` | ```\"default\"``` | Will be the style of the close alert button. |\n| ```placeholderInput``` | ```string``` | ```\"write...\"``` | Input placeholder, which is displayed in the alert input. |\n| ```bgColor``` | ```string``` | ```\"#2dd284\"``` | It is used to manipulate header and button background colors. Accepting `#HEX`, `rgb(red, green ,blue)` and `rgba(red, green ,blue, alpha)`. |\n| ```header``` | ```bolean``` | ```true``` | It is used to say if it will have a header. |\n| ```playSound``` | ```string``` | ```null``` | Sound that plays when calling alerts. |\n\n## **Alerts Types**\n\nTypes that this library allows of alerts:\n\n* `success`\n* `error`\n* `warning`\n* `info`\n* `question`\n* `opinion`\n* `dark`\n* `input`\n* `custom`\n\n# **Toast**\n\nToast are small animations that will appear in the corner of the screen, called by the `awesomeToast()` function.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/69097449/192559156-2b59527a-6ce5-4405-8228-448cca4a9eff.gif\" alt=\"AlertGif\"/\u003e\n\u003c/p\u003e\n\n## **Usage**\n\n```js\nconst btnToast = document.querySelector('#btn-Toast')\n\nbtnToast.addEventListener('click', () =\u003e {\n    awesomeToast({\n        type: 'success',\n        title: 'SUCCESS!',\n        message: 'Action Success!',\n        img: './imgs/success.svg',\n        timer: 3000,\n        position: 'right'\n    })\n```\n\n## **Props Toast**\n\n| Name | type | Default | Description |\n:--------- | :--------- | :--------- | :--------- |\n| ```title```  | ```string``` | ```\"Success\"``` | Will be the alert title. |\n| ```message``` | ```string``` | ```\"Success action\"``` | Will be the alert message. |\n| ```position``` | ```string``` | ```'right'``` | It will be the position that the toast will appear. |\n| ```img``` | ```string``` | ```\"\"``` | Will be the image that will appear to the user. |\n| ```type``` | ```string``` | ```\"success\"``` | Will define what type of alert will be shown. |\n| ```timer``` | ```number``` | ```2000``` | It will be the time the Toast will be on the screen in `ms`. |\n| ```bgColor``` | ```string``` | ```\"#2dd284\"``` | It is used to manipulate header and button background colors. Accepting `#HEX`, `rgb(red, green ,blue)` and `rgba(red, green ,blue, alpha)`. |\n| ```playSound``` | ```string``` | ```null``` | Sound that plays when calling alerts. |\n\n## **Toast Types**\n\n* `success`\n* `error`\n* `warning`\n* `info`\n* `dark`\n* `custom`\n\n# **Horizontal**\n\nThe horizontal alert is wider. Great for making long messages. You can call it by the `awesomeHorizontal()` function.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/69097449/193311392-5a8d7355-866b-436f-8815-ed6d894e11d0.gif\"/\u003e\n\u003c/p\u003e\n\n## **Usage**\n\n```js\nconst btnHorizontal = document.querySelector('#btn-Horizontal')\n\nbtnHorizontal.addEventListener('click', () =\u003e {\n    awesomeHorizontal({\n        type: 'success',\n        title: 'SUCCESS!',\n        message: 'Action Success!',\n        img: './imgs/success.svg',\n        buttonOK: 'Done!'\n    })\n```\n\n## **Props Horizontal**\n\n| Name | type | Default | Description |\n:--------- | :--------- | :--------- | :--------- |\n| ```title```  | ```string``` | ```\"Success\"``` | Will be the alert title. |\n| ```message``` | ```string``` | ```\"Success action\"``` | Will be the alert message. |\n| ```buttonOK``` | ```string``` | ```'OK!'``` | It will be what will appear on the OK button. |\n| ```img``` | ```string``` | ```\"\"``` | Will be the image that will appear to the user. |\n| ```type``` | ```string``` | ```\"success\"``` | Will define what type of alert will be shown. |\n| ```bgColor``` | ```string``` | ```\"#2dd284\"``` | It is used to manipulate header and button background colors. Accepting `#HEX`, `rgb(red, green ,blue)` and `rgba(red, green ,blue, alpha)`. |\n| ```header``` | ```bolean``` | ```true``` | It is used to say if it will have a header. |\n| ```playSound``` | ```string``` | ```null``` | Sound that plays when calling alerts. |\n\n## **Horizontal Types**\n\n* `success`\n* `error`\n* `warning`\n* `info`\n* `dark`\n* `custom`\n\n## **Acknowledgements**\n\nThanks [@gustavosmanc](https://github.com/gustavosmanc) for having a library that inspired me to make this library.\n\nPull requests, feedbacks and suggestions are welcome!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodutra-dev%2Fawesome-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodutra-dev%2Fawesome-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodutra-dev%2Fawesome-alert/lists"}