     Icon buttons are only styled as secondary buttons, and should only be used
     where a secondary button would be appropriate."
 
-    (html
-     [:div {:style {:display "flex"}}
-      [:div.icon {:style {:margin-right "2em"}}
-       [:div {:style {:margin-bottom "1em"}}
-        (icon {:label "Icon"
-               :on-click #(js/alert "Clicked!")}
-              [:i.octicon.octicon-repo-forked])]
-       [:div {:style {:margin-bottom "1em"}}
-        (icon {:label "Icon Disabled"
-               :disabled? true
-               :on-click #(js/alert "Clicked!")}
-              [:i.octicon.octicon-repo-forked])]]]))
+    (button-display
+     [[(icon {:label "Icon"
+              :on-click #(js/alert "Clicked!")}
+             [:i.octicon.octicon-repo-forked])]
+      [(icon {:label "Icon Disabled"
+              :disabled? true
+              :on-click #(js/alert "Clicked!")}
+             [:i.octicon.octicon-repo-forked])]]))
 
   (defcard link-buttons
     "A **link-button** looks like a button, but is actually a link.

    use in table rows, card headers, and anywhere vertical space is at a
    premium."

    (html
     [:div {:style {:display "flex"}}

      ;; Primary buttons
      [:div.primary {:style {:margin-right "2em"}}
       [:div {:style {:margin-bottom "1em"}}
        (button {:kind :primary
                 :on-click #(js/alert "Clicked!")}
                "Primary")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:disabled? true
                 :kind :primary
                 :on-click #(js/alert "Clicked!")}
                "Primary Disabled")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:kind :primary
                 :size :medium
                 :on-click #(js/alert "Clicked!")}
                "Primary Medium")]]

      ;; Secondary buttons
      [:div.secondary {:style {:margin-right "2em"}}
       [:div {:style {:margin-bottom "1em"}}
        (button {:on-click #(js/alert "Clicked!")}
                "Secondary")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:disabled? true
                 :on-click #(js/alert "Clicked!")}
                "Secondary Disabled")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:size :medium
                 :on-click #(js/alert "Clicked!")}
                "Secondary Medium")]]

      ;; Danger buttons
      [:div.danger {:style {:margin-right "2em"}}
       [:div {:style {:margin-bottom "1em"}}
        (button {:kind :danger
                 :on-click #(js/alert "Clicked!")}
                "Danger")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:disabled? true
                 :kind :danger
                 :on-click #(js/alert "Clicked!")}
                "Danger Disabled")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:kind :danger
                 :size :medium
                 :on-click #(js/alert "Clicked!")}
                "Danger Medium")]]

      ;; Flat buttons
      [:div.flat {:style {:margin-right "2em"}}
       [:div {:style {:margin-bottom "1em"}}
        (button {:kind :flat
                 :on-click #(js/alert "Clicked!")}
                "Flat")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:disabled? true
                 :kind :flat
                 :on-click #(js/alert "Clicked!")}
                "Flat Disabled")]
       [:div {:style {:margin-bottom "1em"}}
        (button {:kind :flat
                 :size :medium
                 :on-click #(js/alert "Clicked!")}
                "Flat Medium")]]]))

  (defcard icon-buttons
    "When horizontal space is at a premium, use an **icon button**. These square

    appropriate label for a link-button; neither would \"View Build #5\".
    Instead, \"Build #5\" should be a normal link."

    (button-display
     [;; Primary link buttons
      [(link {:kind :primary
              :href "#"}
             "Primary Link")
       (link {:kind :primary
              :href "#"
              :size :medium}
             "Medium Primary Link")]

      ;; Secondary link buttons
      [(link {:href "#"}
             "Secondary Link")
       (link {:href "#"
              :size :medium}
             "Medium Secondary Link")]

      ;; Danger link buttons
      [(link {:kind :danger
              :href "#"}
             "Danger Link")
       (link {:kind :danger
              :href "#"
              :size :medium}
             "Medium Danger Link")]

      ;; Flat buttons
      [(link {:kind :flat
              :href "#"}
             "Flat Link")
       (link {:kind :flat
              :href "#"
              :size :medium}
             "Medium Flat Link")]])))
