diff --git a/common/index.js b/common/index.js
index dbb312f7e..d43fcf4cf 100644
--- a/common/index.js
+++ b/common/index.js
@@ -19,5 +19,6 @@ module.exports = {
   mixin: require('./mixin'),
   display: require('./display'),
   detail: require('./detail'),
-  progressBar: require('./progress-bar')
+  progressBar: require('./progress-bar'),
+  role: require('./role')
 };
diff --git a/common/role/README.md b/common/role/README.md
new file mode 100644
index 000000000..ceec19ede
--- /dev/null
+++ b/common/role/README.md
@@ -0,0 +1,37 @@
+# roles
+It is a wrapper tag, its only use is to protect its content.
+Warning: the content sould not be two dom element.
+The role tag is super easy to use, there are two concepts:
+
+- a user has at least one Role
+
+In a render function
+
+```javascript
+//SomeWhere else
+let Role = FocusComponents.common.role.component;
+
+render(){
+  return (
+    <Role hasOne={['ROLE_TO_PROTECT_ACTION']}>
+      <Button action={this.handleButtonAction}/>
+    </Role>
+  );
+}
+```
+- a user should have all roles
+
+In a render function
+
+```javascript
+//SomeWhere else
+let Role = FocusComponents.common.role.component;
+
+render(){
+  return (
+    <Role hasAll={['ROLE_TO_PROTECT_ACTION', 'OTHER_ROLE_TO_PROTECT_ACTION']}>
+      <Button action={this.handleButtonAction}/>
+    </Role>
+  );
+}
+```
diff --git a/common/role/example/index.html b/common/role/example/index.html
new file mode 100644
index 000000000..e943a888c
--- /dev/null
+++ b/common/role/example/index.html
@@ -0,0 +1,70 @@
+
+
+<!doctype html>
+<html class="no-js" lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Focus component examples</title>
+  <meta name="description" content="Example of the component.">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Place favicon.ico in the root directory -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
+  <script src="https://fb.me/react-0.13.3.js"></script>
+  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
+
+  <!-- Material degign-->
+  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
+
+  <!-- Material degign-->
+
+  <script src="/focus-components/dist/js/focus.js"></script>
+  <script src="/focus-components/dist/js/focus-components.js"></script>
+  <script src="/focus-components/example/js/initFocus.js"></script>
+  <link rel="stylesheet" href="/focus-components/dist/css/focus-components.css"/>
+</head>
+<body>
+  <h1>ROLE DEMO</h1>
+  <div id="role-container"></div>
+  <script type="text/javascript">
+      $(document).ready(function() {$.material.init();});
+  </script>
+  <script type="text/jsx">
+  //Load dependencies.
+  Focus.components = FocusComponents;
+  var Role = Focus.components.common.role.component;
+  Focus.user.setRoles(['DEFAULT_ROLE', 'ADMIN_ROLE', 'OTHER_ROLE']);
+  var Page = React.createClass({
+    render: function(){
+      return (
+        <div >
+          <Role hasOne={['DEFAULT_ROLE', 'ADMIN_ROLE', 'ANOTHER_ROLE']}>
+            <p>I got one role</p>
+          </Role>
+          <Role hasOne={['UNEXISTING_ROLE']}>
+            <p>No role</p>
+          </Role>
+          <Role hasAll={['DEFAULT_ROLE', 'ADMIN_ROLE']}>
+            <p>I got all roles</p>
+          </Role>
+          <Role hasAll={['DEFAULT_ROLE', 'ADMIN_ROLE','UNEXISTING_ROLE']}>
+            <p>Not all role</p>
+          </Role>
+        </div>
+      );
+    }
+  });
+  React.render(<Page/>, document.querySelector("#role-container"));
+
+  </script>
+
+</body>
+
+</html>
diff --git a/common/role/index.js b/common/role/index.js
new file mode 100644
index 000000000..7130d8cb7
--- /dev/null
+++ b/common/role/index.js
@@ -0,0 +1,29 @@
+let React = require('react');
+let builder = require('focus').component.builder;
+let user = require('focus').user;
+let intersection = require('lodash/array/intersection');
+let isArray = require('lodash/lang/isArray');
+let type = require('focus').component.types;
+
+/**
+ * Mixin button.
+ * @type {Object}
+ */
+var roleMixin = {
+    propTypes:{
+      hasOne: type('array'),
+      hasAll:type('array')
+    },
+    render() {
+      let userRoles = user.getRoles();
+      if(isArray(this.props.hasAll) && intersection(userRoles, this.props.hasAll).length === this.props.hasAll.length){
+        return this.props.children;
+      } else if(isArray(this.props.hasOne) && intersection(userRoles, this.props.hasOne).length > 0){
+        return this.props.children;
+      }
+      return null;
+
+    }
+};
+
+module.exports = builder(roleMixin);
diff --git a/package.json b/package.json
index 52def93e7..a61445124 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,10 @@
       "name": "field",
       "path": "common/field"
     },
+    {
+      "name": "role",
+      "path": "common/role"
+    },
     {
       "name": "icon",
       "path": "common/icon"
