\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `papillon-alerts` with this command.\n\n```\n$ npm install --save papillon-alerts\n```\n\n## Explorer\n\nCheck out how to use Papillon Alerts with React 16, Webpack 4 and Babel 7 [here](https://github.com/mts/papillon/tree/master/packages/papillon-alerts/explorer)\n\n## NPM\n\nGet the latest papillon-alerts [here](https://www.npmjs.com/package/papillon-alerts)\n\n## Usage\n\nYou can import it like this.\n\n```javascript\nimport { FlashAlert, FlashMessages } from 'papillon-alerts'\n```\n\n## Documentation\n\nFlash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.\n\n### Default\n\nFlash messages start off looking decently neutral—they're just light blue rounded rectangles.\n\n```html\n\n Flash message goes here.\n\n```\n\nYou can put multiple paragraphs of text in a flash message—the last paragraph's bottom `margin` will be automatically override.\n\n```html\n\n
\n This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more text,\n it'll eventually wrap to a new line.\n
\n
And this is another paragraph.
\n\n```\n\nShould the need arise, you can quickly space out your flash message from surrounding content with a `.flash-messages` wrapper. _Note the extra top and bottom margin in the example below._\n\n```html\n\n \n Flash message goes here.\n \n\n```\n\n### Variations\n\nAdd `.flash-warn`, `.flash-error`, or `.flash-success` to the flash message to make it yellow, red, or green, respectively.\n\n```html\n\n Flash message goes here.\n\n\n\n Flash message goes here.\n\n\n\n Flash message goes here.\n\n```\n\n### With icon\n\nAdd an icon to the left of the flash message to give it some funky fresh attention.\n\n```html\n\n Flash message with an icon goes here.\n\n```\n\n### With dismiss\n\nAdd a JavaScript enabled (via Crema) dismiss (close) icon on the right of any flash message.\n\n```html\n\n {}}\n >\n \n \n Dismissable flash message goes here.\n\n```\n\n### With action button\n\nA flash message with an action button.\n\n```html\n\n {}}\n >\n Complete action\n \n Flash message with action here.\n\n```\n\n### Full width flash\n\nA flash message that is full width and removes border and border radius.\n\n```html\n
![\"\"](\"https://nodei.co/npm/papillon-alerts.png\")
\n \n