diff --git a/src/components/active.js b/src/components/active.js
index 2365a04..ac7e131 100644
--- a/src/components/active.js
+++ b/src/components/active.js
@@ -1,15 +1,15 @@
 import React from 'react'
 
-export const active = Component => {
+export const active = (Component, Span = 'span') => {
   return class Active extends React.Component {
     state = { active: false }
     handleMouseDown = () => this.setState({ active: true })
     handleMouseUp = () => this.setState({ active: false })
 
     render = () => (
-      <span onMouseDown={ this.handleMouseDown } onMouseUp={ this.handleMouseUp }>
+      <Span onMouseDown={ this.handleMouseDown } onMouseUp={ this.handleMouseUp }>
         <Component { ...this.props } { ...this.state } />
-      </span>
+      </Span>
     )
   }
 }
diff --git a/src/components/hover.js b/src/components/hover.js
index ecfa092..e2d1518 100644
--- a/src/components/hover.js
+++ b/src/components/hover.js
@@ -1,15 +1,15 @@
 import React from 'react'
 
-export const hover = Component => {
+export const hover = (Component, Span = 'span') => {
   return class Hover extends React.Component {
     state = { hover: false }
     handleMouseOver = () => this.setState({ hover: true })
     handleMouseOut = () => this.setState({ hover: false })
 
     render = () => (
-      <span onMouseOver={ this.handleMouseOver } onMouseOut={ this.handleMouseOut }>
+      <Span onMouseOver={ this.handleMouseOver } onMouseOut={ this.handleMouseOut }>
         <Component { ...this.props } { ...this.state } />
-      </span>
+      </Span>
     )
   }
 }