         e.preventDefault()
         @props.actions.setState(show_hidden : not @props.show_hidden)
 
+    handle_backup: (e) ->
+        e.preventDefault()
+        @props.actions.open_directory('.snapshots')
+
     render_refresh: ->
-        <a href='' onClick={@handle_refresh}><Icon name='refresh' /> </a>
+        <Button bsSize='small' onClick={@handle_refresh}>
+            <Icon name='refresh' />
+        </Button>
 
     render_hidden_toggle: ->
-        if @props.show_hidden
-            <a href='' onClick={@handle_hidden_toggle}><Icon name='eye' /> </a>
-        else
-            <a href='' onClick={@handle_hidden_toggle}><Icon name='eye-slash' /> </a>
+        icon = if @props.show_hidden then 'eye' else 'eye-slash'
+        <Button bsSize='small' onClick={@handle_hidden_toggle}>
+            <Icon name={icon} />
+        </Button>
 
     render_backup: ->
         if @props.public_view or not require('./customize').commercial
             return
         # NOTE -- snapshots aren't available except in commercial version -- they are complicated nontrivial thing that isn't usually setup...
-        <a href='' onClick={(e)=>e.preventDefault(); @props.actions.open_directory('.snapshots')}>
-            <Icon name='life-saver' /> <span style={fontSize: 14} className='hidden-sm'>Backups</span>
-        </a>
+        <Button bsSize='small' onClick={@handle_backup}>
+            <Icon name='life-saver' /> <span style={fontSize: 12} className='hidden-sm'>Backups</span>
+        </Button>
 
     render: ->
-        <div style={textAlign: 'right', fontSize: '14pt'}>
-            {@render_refresh()}
-            {@render_hidden_toggle()}
-            {@render_backup()}
-        </div>
+        <ButtonToolbar>
+            <ButtonGroup bsSize='small' className='pull-right'>
+                {@render_refresh()}
+                {@render_hidden_toggle()}
+                {@render_backup()}
+            </ButtonGroup>
+        </ButtonToolbar>
 
 ProjectFilesActions = rclass
     displayName : 'ProjectFiles-ProjectFilesActions'


    make_path: ->
        v = []
        v.push <PathSegmentLink path='' display={<Icon name='home' />} key='home' actions={@props.actions} />
        if @props.current_path == ""
            return v
        path = @props.current_path

            path = path[1..]
        path_segments = path.split('/')
        for segment, i in path_segments
            v.push <PathSegmentLink
                    path      = {path_segments[..i].join('/')}
                    display   = {misc.trunc_middle(segment, 15)}
                    full_name = {segment}
                    key       = {i+1}
                    actions   = {@props.actions} />
        return v

    render: ->
        <ButtonToolbar>
            <ButtonGroup bsSize='small'>
                {@make_path()}
            </ButtonGroup>
        </ButtonToolbar>

ProjectFilesButtons = rclass
    displayName : 'ProjectFiles-ProjectFilesButtons'
