From 951c850d35affcffba8763a86baa407d19e0c140 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Fri, 12 May 2017 08:49:33 -0700 Subject: [PATCH] adds button group links --- docs/pages/button-group.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md index 05f900815..295b93f46 100644 --- a/docs/pages/button-group.md +++ b/docs/pages/button-group.md @@ -12,6 +12,12 @@ flexbox: true Add the `.button-group` class to a container, and inside it place any number of buttons. The buttons are separated by a small border. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
One @@ -26,6 +32,12 @@ Add the `.button-group` class to a container, and inside it place any number of Button groups can be sized with the same classes as standard buttons: `.tiny`, `.small`, and `.large`. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
Small @@ -40,6 +52,12 @@ Button groups can be sized with the same classes as standard buttons: `.tiny`, ` Buttons within a button group can be colored individually with the `.secondary`, `.success`, `.warning`, and `.alert` classes. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
View @@ -66,6 +84,12 @@ The entire group can also be colored using the same classes. Add the `.expanded` class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
Expanded @@ -80,6 +104,12 @@ Add the `.expanded` class to the container to make a full-width button group. Ea A button group can be made vertical with the `.stacked` class. You can also use `.stacked-for-small` to only stack a button group on small screens, or `.stacked-for-medium` to only stack on small and medium screens. +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
How @@ -98,6 +128,12 @@ To build a split button, just create a button group with two buttons. To create a button with only an arrow, add the class `.arrow-only`. Note that the button still needs a label for screen readers, which can be embedded inside the button with a `.show-for-sr` element. In the example below, an assistive device will read the arrow button as "Show menu". +
+ Watch this part in video + + edit on codepen button +
+ ```html_example
Primary Action -- 2.47.2