Button group doc examples

docs/components_page/components/button.md

@@ -30,14 +30,38 @@ Modify the size of the button by setting `size` to either `"sm"` or `"lg"` for a
 ## Block button
 
 Create a Bootstrap 4 style block level button (one which spans the full width
-of the parent) by using Bootstrap's grid spacing utilities.
+of the parent) by using Bootstrap's [spacing utility classes](https://getbootstrap.com/docs/5.0/utilities/spacing/).
 
 {{example:components/button/block.py:button}}
 
+## Smaller block buttons
+
+You can adjust the width of the block button can be achieved using grid column width classes. This button is made half-size using `.col-6` and centered with `.mx-auto`.
+
+{{example:components/button/half_block.py:button}}
+
+## Responsive block buttons
+
+A responsive variation on the block button can be created by making using of breakpoints to specify behaviour. Resize your screen to see how adding the `d-md-block` class changes the button behaviour on smaller screens.
+
+{{example:components/button/responsive_block.py:button}}
+
+## Flex layout
+
+Flex and margin utilities can be used to adjust the alignment of the buttons in their horizontal state too. Here we use them in conjuction with the responsive block button above to control the layout on larger and smaller screens.
+
+{{example:components/button/flex_block.py:button}}
+
 ## Active and disabled states
 
 When a user hovers the cursor over a button the background and border will darken in response. You can enforce this active state if needed by setting `active=True`.
 
 {{example:components/button/active_disabled.py:buttons}}
 
+## Download option
+
+The `download` prop allows you to specify the filename for a downloaded file that can differ from the filename on the server.
+
+{{example:components/button/download.py:button}}
+
 {{apidoc:src/components/Button.js}}

docs/components_page/components/button/download.R

@@ -0,0 +1,15 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+
+button <- htmlDiv(
+  list(
+    dbcButton(
+      "Download",
+      href = "/static/data_file.txt",
+      download = "my_data.txt",
+      external_link = TRUE,
+      color = "primary"
+    )
+  )
+)

docs/components_page/components/button/download.jl

@@ -0,0 +1,11 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+button = html_div([
+    dbc_button(
+        "Download",
+        href = "/static/data_file.txt",
+        download = "my_data.txt",
+        external_link = true,
+        color = "primary",
+    ),
+])

docs/components_page/components/button/download.py

@@ -0,0 +1,14 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+button = html.Div(
+    [
+        dbc.Button(
+            "Download",
+            href="/static/data_file.txt",
+            download="my_data.txt",
+            external_link=True,
+            color="primary",
+        ),
+    ]
+)

docs/components_page/components/button/flex_block.R

@@ -0,0 +1,11 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+button <- htmlDiv(
+  list(
+    dbcButton("Button 1", class_name = "me-md-2"),
+    dbcButton("Button 2", class_name = "me-md-2"),
+    dbcButton("Button 3")
+  ),
+  class_name = "d-grid gap-2 d-md-flex justify-content-md-end"
+)

docs/components_page/components/button/flex_block.jl

@@ -0,0 +1,11 @@
+using DashBootstrapComponents
+using DashHtmlComponents
+
+button = html_div(
+    [
+        dbc_button("Button 1", class_name = "me-md-2"),
+        dbc_button("Button 2", class_name = "me-md-2"),
+        dbc_button("Button 3"),
+    ],
+    class_name = "d-grid gap-2 d-md-flex justify-content-md-end",
+);

docs/components_page/components/button/flex_block.py

@@ -0,0 +1,11 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+button = html.Div(
+    [
+        dbc.Button("Button 1", class_name="me-md-2"),
+        dbc.Button("Button 2", class_name="me-md-2"),
+        dbc.Button("Button 3"),
+    ],
+    class_name="d-grid gap-2 d-md-flex justify-content-md-end",
+)

docs/components_page/components/button/half_block.R

@@ -0,0 +1,10 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+button <- htmlDiv(
+  list(
+    dbcButton("Block button", color = "primary"),
+    dbcButton("Block button", color = "secondary")
+  ),
+  class_name = "d-grid gap-2 col-6 mx-auto"
+)

docs/components_page/components/button/half_block.jl

@@ -0,0 +1,10 @@
+using DashBootstrapComponents
+using DashHtmlComponents
+
+button = html_div(
+    [
+        dbc_button("Block button", color = "primary"),
+        dbc_button("Block button", color = "secondary"),
+    ],
+    class_name = "d-grid gap-2 col-6 mx-auto",
+);

docs/components_page/components/button/half_block.py

@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+button = html.Div(
+    [
+        dbc.Button("Block button", color="primary"),
+        dbc.Button("Block button", color="secondary"),
+    ],
+    class_name="d-grid gap-2 col-6 mx-auto",
+)

docs/components_page/components/button/responsive_block.R

@@ -0,0 +1,10 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+button <- htmlDiv(
+  list(
+    dbcButton("Block button", color = "primary"),
+    dbcButton("Block button", color = "secondary")
+  ),
+  class_name = "d-grid gap-2 d-md-block"
+)

docs/components_page/components/button/responsive_block.jl

@@ -0,0 +1,10 @@
+using DashBootstrapComponents
+using DashHtmlComponents
+
+button = html_div(
+    [
+        dbc_button("Block button", color = "primary"),
+        dbc_button("Block button", color = "secondary"),
+    ],
+    class_name = "d-grid gap-2 d-md-block",
+);

docs/components_page/components/button/responsive_block.py

@@ -0,0 +1,10 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+
+button = html.Div(
+    [
+        dbc.Button("Block button", color="primary"),
+        dbc.Button("Block button", color="secondary"),
+    ],
+    class_name="d-grid gap-2 d-md-block",
+)

docs/components_page/components/button_group.md

@@ -15,6 +15,18 @@ Instead of setting the `size` prop of each button in the group, you can set the
 
 {{example:components/button_group/size.py:button_groups}}
 
+## Mixed styles
+
+You can apply styles to individual buttons within the group.
+
+{{example:components/button_group/mixed.py:button_group}}
+
+## Outline style
+
+Create a group of outline buttons using `outline=True` and setting the `color` as required.
+
+{{example:components/button_group/outline.py:button_group}}
+
 ## Dropdown
 
 As well as `Button` you can include `DropdownMenu` in your button groups by setting `group=True`.

docs/components_page/components/button_group/mixed.R

@@ -0,0 +1,9 @@
+library(dashBootstrapComponents)
+
+button_group <- dbcButtonGroup(
+  list(
+    dbcButton("Left", color = "danger"),
+    dbcButton("Middle", color = "warning"),
+    dbcButton("Right", color = "success")
+  )
+)

docs/components_page/components/button_group/mixed.jl

@@ -0,0 +1,7 @@
+using DashBootstrapComponents
+
+button_group = dbc_buttongroup([
+    dbc_button("Left", color = "danger"),
+    dbc_button("Middle", color = "warning"),
+    dbc_button("Right", color = "success"),
+])

docs/components_page/components/button_group/mixed.py

@@ -0,0 +1,9 @@
+import dash_bootstrap_components as dbc
+
+button_group = dbc.ButtonGroup(
+    [
+        dbc.Button("Left", color="danger"),
+        dbc.Button("Middle", color="warning"),
+        dbc.Button("Right", color="success"),
+    ]
+)

docs/components_page/components/button_group/outline.R

@@ -0,0 +1,9 @@
+library(dashBootstrapComponents)
+
+button_group <- dbcButtonGroup(
+  list(
+    dbcButton("Left", outline = TRUE, color = "primary"),
+    dbcButton("Middle", outline = TRUE, color = "primary"),
+    dbcButton("Right", outline = TRUE, color = "primary")
+  )
+)

docs/components_page/components/button_group/outline.jl

@@ -0,0 +1,7 @@
+using DashBootstrapComponents
+
+button_group = dbc_buttongroup([
+    dbc_button("Left", outline = true, color = "primary"),
+    dbc_button("Middle", outline = true, color = "primary"),
+    dbc_button("Right", outline = true, color = "primary"),
+])

docs/components_page/components/button_group/outline.py

@@ -0,0 +1,9 @@
+import dash_bootstrap_components as dbc
+
+button_group = dbc.ButtonGroup(
+    [
+        dbc.Button("Left", outline=True, color="primary"),
+        dbc.Button("Middle", outline=True, color="primary"),
+        dbc.Button("Right", outline=True, color="primary"),
+    ]
+)

docs/static/data_file.txt

@@ -0,0 +1 @@
+This is an example data file used to demonstrate the download option in Buttons.