diff --git a/examples/todos/.meteor/packages b/examples/todos/.meteor/packages
index d35f3979f0..f97290db15 100644
--- a/examples/todos/.meteor/packages
+++ b/examples/todos/.meteor/packages
@@ -8,3 +8,4 @@ backbone
 accounts
 accounts-facebook
 accounts-google
+login-buttons
diff --git a/examples/todos/client/todos.css b/examples/todos/client/todos.css
index 7fff5e43d1..bad558c656 100644
--- a/examples/todos/client/todos.css
+++ b/examples/todos/client/todos.css
@@ -259,24 +259,6 @@ h3 {
     width: 80px;
 }
 
-/* XXX remove once we have the login-buttons package */
-.fb-login, #logout {
-    cursor: pointer;
-    margin: 5px 10px 5px 5px;
-    padding: 2px 7px;
-    font-size: 80%;
-    color: white;
-
-    background: #3B5998;
-    margin-top: 10px;
-
-    border: 1px solid #777;
-    border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    -o-border-radius: 4px;
-}
-
 .toggle-privacy-wrapper {
     float: right;
     width: 110px;
diff --git a/examples/todos/client/todos.html b/examples/todos/client/todos.html
index d5456fcd88..8e0b987f3a 100644
--- a/examples/todos/client/todos.html
+++ b/examples/todos/client/todos.html
@@ -112,17 +112,7 @@
       </div>
     {{/each}}
     <div style="float: right">
-      {{> login}}
+      {{> login_buttons}}
     </div>
   </div>
 </template>
-
-<template name="login">
-  {{#if user}}
-    <div id="logout">logout</div>
-  {{else}}
-    <div id="fb-login">login using facebook</div>
-    <div id="google-login">login using google</div>
-  {{/if}}
-</template>
-
diff --git a/examples/todos/client/todos.js b/examples/todos/client/todos.js
index 6f45cb1f71..d6c39bccf9 100644
--- a/examples/todos/client/todos.js
+++ b/examples/todos/client/todos.js
@@ -299,36 +299,6 @@ Template.tag_filter.events = {
   }
 };
 
-////////// Login //////////
-
-Template.login.events = {
-  'click #fb-login': function () {
-    try {
-      Meteor.loginWithFacebook();
-    } catch (e) {
-      if (e instanceof Meteor.accounts.facebook.SetupError)
-        alert("You haven't set up your Facebook app details. See fb-app.js and server/fb-secret.js");
-      else
-        throw e;
-    }
-  },
-
-  'click #google-login': function () {
-    try {
-      Meteor.loginWithGoogle();
-    } catch (e) {
-      if (e instanceof Meteor.accounts.google.SetupError)
-        alert("You haven't set up your Google API details. See google-api.js and server/google-secret.js");
-      else
-        throw e;
-    };
-  },
-
-  'click #logout': function() {
-    Meteor.logout();
-  }
-};
-
 ////////// Tracking selected list in URL //////////
 
 var TodosRouter = Backbone.Router.extend({
diff --git a/packages/login-buttons/login-buttons.css b/packages/login-buttons/login-buttons.css
new file mode 100644
index 0000000000..cae539969b
--- /dev/null
+++ b/packages/login-buttons/login-buttons.css
@@ -0,0 +1,18 @@
+.login-button {
+    float:left;
+
+    cursor: pointer;
+    margin: 5px 10px 5px 5px;
+    padding: 2px 7px;
+    font-size: 80%;
+    color: white;
+
+    background: #3B5998;
+    margin-top: 10px;
+
+    border: 1px solid #777;
+    border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    -o-border-radius: 4px;
+}
diff --git a/packages/login-buttons/login-buttons.html b/packages/login-buttons/login-buttons.html
new file mode 100644
index 0000000000..d7f9a6b99e
--- /dev/null
+++ b/packages/login-buttons/login-buttons.html
@@ -0,0 +1,10 @@
+<template name="login_buttons">
+  <div id="login-buttons">
+    {{#if user}}
+      <div class="login-button" id="login-buttons-logout">logout</div>
+    {{else}}
+      <div class="login-button" id="login-buttons-fb-login">login using facebook</div>
+      <div class="login-button" id="login-buttons-google-login">login using google</div>
+    {{/if}}
+  </div>
+</template>
diff --git a/packages/login-buttons/login-buttons.js b/packages/login-buttons/login-buttons.js
new file mode 100644
index 0000000000..aed6b763b4
--- /dev/null
+++ b/packages/login-buttons/login-buttons.js
@@ -0,0 +1,31 @@
+(function () {
+
+  Template.login_buttons.events = {
+    'click #login-buttons-fb-login': function () {
+      try {
+        Meteor.loginWithFacebook();
+      } catch (e) {
+        if (e instanceof Meteor.accounts.facebook.SetupError)
+          alert("You haven't set up your Facebook app details. See fb-app.js and server/fb-secret.js");
+        else
+          throw e;
+      }
+    },
+
+    'click #login-buttons-google-login': function () {
+      try {
+        Meteor.loginWithGoogle();
+      } catch (e) {
+        if (e instanceof Meteor.accounts.google.SetupError)
+          alert("You haven't set up your Google API details. See google-api.js and server/google-secret.js");
+        else
+          throw e;
+      };
+    },
+
+    'click #login-buttons-logout': function() {
+      Meteor.logout();
+    }
+  };
+
+})();
diff --git a/packages/login-buttons/package.js b/packages/login-buttons/package.js
new file mode 100644
index 0000000000..6b331da121
--- /dev/null
+++ b/packages/login-buttons/package.js
@@ -0,0 +1,12 @@
+Package.describe({
+  summary: "Simple template to add login buttons to an app."
+});
+
+Package.on_use(function (api) {
+  api.use(['accounts', 'underscore', 'liveui', 'templating'], 'client');
+
+  api.add_files([
+    'login-buttons.css',
+    'login-buttons.html',
+    'login-buttons.js'], 'client');
+});