diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index b50b0ca7ad..a88148a6ed 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -97,6 +97,7 @@ module.exports = {
'../react/Paper',
'../react/PasswordField',
'../react/PieChart',
+ '../react/PointerAlert',
'../react/Progress',
'../react/ProgressionBanner',
'../react/RadioGroup',
diff --git a/react/PointerAlert/Readme.md b/react/PointerAlert/Readme.md
new file mode 100644
index 0000000000..c654577943
--- /dev/null
+++ b/react/PointerAlert/Readme.md
@@ -0,0 +1,143 @@
+Displays a Alert with an Arrow pointing to a direction (top, right, bottom, left). It is essentially based on Alert so it inherits its props and defaultProps.
+
+### Basic usage
+
+```bash
+import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
+
+
+ Your PointerAlert content
+
+```
+
+### Demo
+
+```jsx
+import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Variants from 'cozy-ui/docs/components/Variants'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+
+const initialVariants = [{
+ longText: false,
+ title: false,
+ block: true,
+ color: false,
+ largeIcon: false,
+ noIcon: false,
+ square: false,
+ actionOne: true,
+ actionTwo: false,
+ close: false
+}]
+
+const directions = ['top', 'bottom', 'left', 'right']
+
+;
+
+
+ {variant => (
+ <>
+ {directions.map(direction =>
+
+
: undefined}
+ action={(variant.actionOne || variant.actionTwo) ?
+ <>
+ {variant.actionOne &&
+
} />
+ }
+ {variant.actionTwo &&
+
+ }
+ >
+ : undefined
+ }
+ onClose={variant.close ? () => {} : undefined}
+ >
+ {variant.title &&
This is the title}
+ {variant.longText
+ ? content.ada.short
+ : "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."
+ }
+
+
+ )}
+ >
+ )}
+
+```
+
+### Colors
+
+```jsx
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
+
+const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color
+
+;
+
+<>
+ {colors.map(color =>
+
+
}
+ >
+
{color}
+ This is a {color} alert
+
+
+ )}
+
+
+ Filled variant
+
+ {colors.map(color =>
+
+
}
+ >
+
{color}
+ This is a {color} alert
+
+
+ )}
+
+
+ Outlined variant
+
+ {colors.map(color =>
+
+
}
+ >
+
{color.toUpperCase()}
+ This is a {color} alert
+
+
+ )}
+>
+```
diff --git a/react/PointerAlert/index.jsx b/react/PointerAlert/index.jsx
new file mode 100644
index 0000000000..f554acc390
--- /dev/null
+++ b/react/PointerAlert/index.jsx
@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import { makeStyles } from '../styles'
+import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
+import { AlertPropTypes, AlertDefaultProps } from '../Alert'
+
+import Alert from '../Alert'
+
+const useStyles = makeStyles(theme => ({
+ top: {
+ // create the arrow
+ borderLeft: '0.75rem solid transparent',
+ borderRight: '0.75rem solid transparent',
+ borderBottom: ({ variant, severity }) =>
+ `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+ // position the arrow
+ position: 'absolute',
+ top: '-0.75rem',
+ left: '50%',
+ marginLeft: '-0.75rem'
+ },
+ bottom: {
+ // create the arrow
+ borderLeft: '0.75rem solid transparent',
+ borderRight: '0.75rem solid transparent',
+ borderTop: ({ variant, severity }) =>
+ `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+ // position the arrow
+ position: 'absolute',
+ bottom: '-0.75rem',
+ left: '50%',
+ marginLeft: '-0.75rem'
+ },
+ left: {
+ // create the arrow
+ borderTop: '0.75rem solid transparent',
+ borderBottom: '0.75rem solid transparent',
+ borderRight: ({ variant, severity }) =>
+ `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+ // position the arrow
+ position: 'absolute',
+ left: '-0.75rem',
+ top: '50%',
+ marginTop: '-0.75rem'
+ },
+ right: {
+ // create the arrow
+ borderTop: '0.75rem solid transparent',
+ borderBottom: '0.75rem solid transparent',
+ borderLeft: ({ variant, severity }) =>
+ `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+ // position the arrow
+ position: 'absolute',
+ right: '-0.75rem',
+ top: '50%',
+ marginTop: '-0.75rem'
+ }
+}))
+
+const PointerAlert = forwardRef(
+ ({ className, severity, children, variant, direction, ...props }, ref) => {
+ const styles = useStyles({ variant, severity })
+
+ return (
+
+ {children}
+
+
+ )
+ }
+)
+
+PointerAlert.displayName = 'PointerAlert'
+
+PointerAlert.propTypes = {
+ ...AlertPropTypes,
+ direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+}
+
+PointerAlert.defaultProps = {
+ ...AlertDefaultProps,
+ direction: 'bottom'
+}
+
+export default PointerAlert
diff --git a/react/index.js b/react/index.js
index f4500a08f3..df3e9bacf2 100644
--- a/react/index.js
+++ b/react/index.js
@@ -113,6 +113,7 @@ export { default as DropdownText } from './DropdownText'
export { default as CircleButton } from './CircleButton'
export { default as Alert } from './Alert'
export { default as AlertTitle } from './AlertTitle'
+export { default as PointerAlert } from './PointerAlert'
export { default as Tabs } from './Tabs'
export { default as Tab } from './Tab'
export { default as CircularChart } from './CircularChart'