diff --git a/components/button/index.js b/components/button/index.js
index b1d8b27..ae46d45 100644
--- a/components/button/index.js
+++ b/components/button/index.js
@@ -2,6 +2,11 @@
 const r = require('r-dom');
 
 const Button = props => r.button({
+	ref: input => {
+		if (input && props.autoFocus) {
+			input.focus();
+		}
+	},
 	className: 'button',
 	...props,
 }, props.children);
diff --git a/components/cards/index.js b/components/cards/index.js
index ab7f96c..cb7ddb9 100644
--- a/components/cards/index.js
+++ b/components/cards/index.js
@@ -35,6 +35,7 @@ const Preferences = withStateHandlers(
 	r.div([
 		r(Button, {
 			style: { width: '100%' },
+			autoFocus: true,
 			onClick: toggle,
 		}, 'Close'),
 	]),
@@ -68,6 +69,7 @@ const Preferences = withStateHandlers(
 	]),
 ] : [
 	r(Button, {
+		autoFocus: true,
 		onClick: toggle,
 	}, 'Cards'),
 ]));
diff --git a/components/preferences/index.js b/components/preferences/index.js
index c6113c3..ff73a4a 100644
--- a/components/preferences/index.js
+++ b/components/preferences/index.js
@@ -34,6 +34,7 @@ const Preferences = withStateHandlers(
 	r.div([
 		r(Button, {
 			style: { width: '100%' },
+			autoFocus: true,
 			onClick: toggle,
 		}, 'Close'),
 	]),
@@ -130,6 +131,7 @@ const Preferences = withStateHandlers(
 	]),
 ] : [
 	r(Button, {
+		autoFocus: true,
 		onClick: toggle,
 	}, 'Preferences'),
 ]));