diff --git a/docs/app/Examples/elements/Button/Usage/ButtonExampleFocus.js b/docs/app/Examples/elements/Button/Usage/ButtonExampleFocus.js
new file mode 100644
index 0000000000..0f0d1ea2b1
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Usage/ButtonExampleFocus.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Button, Grid } from 'semantic-ui-react'
+
+export default class ButtonExampleFocus extends Component {
+ handleClick = () => this.ref.focus()
+
+ handleRef = c => (this.ref = c)
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/docs/app/Examples/elements/Button/Usage/index.js b/docs/app/Examples/elements/Button/Usage/index.js
new file mode 100644
index 0000000000..a1224af767
--- /dev/null
+++ b/docs/app/Examples/elements/Button/Usage/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const ButtonUsageExamples = () => (
+
+
+
+)
+
+export default ButtonUsageExamples
diff --git a/docs/app/Examples/elements/Button/index.js b/docs/app/Examples/elements/Button/index.js
index b9addc0eba..72bfc64855 100644
--- a/docs/app/Examples/elements/Button/index.js
+++ b/docs/app/Examples/elements/Button/index.js
@@ -1,10 +1,12 @@
import React from 'react'
-import Types from './Types'
-import Groups from './Groups'
+
import Content from './Content'
+import Groups from './Groups'
+import GroupVariations from './GroupVariations'
import States from './States'
+import Types from './Types'
import Variations from './Variations'
-import GroupVariations from './GroupVariations'
+import Usage from './Usage'
const ButtonExamples = () => (
@@ -14,6 +16,7 @@ const ButtonExamples = () => (
+
)
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index 61d410decb..da8fa0792d 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -175,6 +175,8 @@ class Button extends Component {
if (ElementType === 'div') return 0
}
+ focus = () => _.invoke(this.ref, 'focus')
+
handleClick = (e) => {
const { disabled, onClick } = this.props
@@ -186,6 +188,8 @@ class Button extends Component {
if (onClick) onClick(e, this.props)
}
+ handleRef = c => (this.ref = c)
+
hasIconClass = () => {
const { labelPosition, children, content, icon } = this.props
@@ -257,7 +261,7 @@ class Button extends Component {
debug('render children:', { classes })
return (
-
+
{children}
)
@@ -277,7 +281,7 @@ class Button extends Component {
return (
{labelPosition === 'left' && labelElement}
-