diff --git a/components/link/index.cjsx b/components/link/index.cjsx
index a0cb7749..19a3c52b 100644
--- a/components/link/index.cjsx
+++ b/components/link/index.cjsx
@@ -1,5 +1,5 @@
-require './style'
-FontIcon = require "../font_icon"
+localCSS = require './style'
+FontIcon = require '../font_icon'
module.exports = React.createClass
@@ -13,7 +13,8 @@ module.exports = React.createClass
route : React.PropTypes.array
getDefaultProps: ->
- attributes : ""
+ attributes : ''
+ className : ''
# -- Events
onClick: (event) ->
@@ -21,12 +22,10 @@ module.exports = React.createClass
# -- Render
render: ->
-
- { if @props.icon }
+ className = "#{localCSS.root} #{@props.className}"
+
+ { if @props.icon }
{ {@props.caption} if @props.caption }
{ {@props.count} if @props.count and parseInt(@props.count) isnt 0}
diff --git a/components/link/style.styl b/components/link/style.styl
index cc4bff00..cc798ce6 100644
--- a/components/link/style.styl
+++ b/components/link/style.styl
@@ -1,9 +1,13 @@
-@import "../constants.styl"
+@import '../constants'
-[data-component-link]
+:local(.icon)
+ margin-right : (SPACE / 2)
+ font-size : FONT_SIZE_BIG
+
+:local(.root)
position : relative
overflow : hidden
- transition opacity ANIMATION_DURATION ANIMATION_EASE
+ transition : opacity ANIMATION_DURATION ANIMATION_EASE
// -- Styles
&:not(.active)
font-weight : FONT_WEIGHT_THIN
@@ -15,9 +19,6 @@
// -- Children
> *
vertical-align : middle
- > .icon
- margin-right : (SPACE / 2)
- font-size : FONT_SIZE_BIG
> abbr
text-transform : Capitalize
> small