diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md
index ea39efcfe..a0bc73205 100644
--- a/docs/components_page/components/button.md
+++ b/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}}
diff --git a/docs/components_page/components/button/download.R b/docs/components_page/components/button/download.R
new file mode 100644
index 000000000..a130266c6
--- /dev/null
+++ b/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"
+    )
+  )
+)
diff --git a/docs/components_page/components/button/download.jl b/docs/components_page/components/button/download.jl
new file mode 100644
index 000000000..748355eed
--- /dev/null
+++ b/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",
+    ),
+])
diff --git a/docs/components_page/components/button/download.py b/docs/components_page/components/button/download.py
new file mode 100644
index 000000000..95b2be777
--- /dev/null
+++ b/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",
+        ),
+    ]
+)
diff --git a/docs/components_page/components/button/flex_block.R b/docs/components_page/components/button/flex_block.R
new file mode 100644
index 000000000..c916df0b3
--- /dev/null
+++ b/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"
+)
diff --git a/docs/components_page/components/button/flex_block.jl b/docs/components_page/components/button/flex_block.jl
new file mode 100644
index 000000000..7ec298596
--- /dev/null
+++ b/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",
+);
diff --git a/docs/components_page/components/button/flex_block.py b/docs/components_page/components/button/flex_block.py
new file mode 100644
index 000000000..395461b56
--- /dev/null
+++ b/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",
+)
diff --git a/docs/components_page/components/button/half_block.R b/docs/components_page/components/button/half_block.R
new file mode 100644
index 000000000..3a02e66f6
--- /dev/null
+++ b/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"
+)
diff --git a/docs/components_page/components/button/half_block.jl b/docs/components_page/components/button/half_block.jl
new file mode 100644
index 000000000..acc0f7ad3
--- /dev/null
+++ b/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",
+);
diff --git a/docs/components_page/components/button/half_block.py b/docs/components_page/components/button/half_block.py
new file mode 100644
index 000000000..2f2fae2e0
--- /dev/null
+++ b/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",
+)
diff --git a/docs/components_page/components/button/responsive_block.R b/docs/components_page/components/button/responsive_block.R
new file mode 100644
index 000000000..98c484c53
--- /dev/null
+++ b/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"
+)
diff --git a/docs/components_page/components/button/responsive_block.jl b/docs/components_page/components/button/responsive_block.jl
new file mode 100644
index 000000000..56c3d2387
--- /dev/null
+++ b/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",
+);
diff --git a/docs/components_page/components/button/responsive_block.py b/docs/components_page/components/button/responsive_block.py
new file mode 100644
index 000000000..2fd7ba438
--- /dev/null
+++ b/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",
+)
diff --git a/docs/components_page/components/button_group.md b/docs/components_page/components/button_group.md
index 27c1f1998..fc7d01e9b 100644
--- a/docs/components_page/components/button_group.md
+++ b/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`.
diff --git a/docs/components_page/components/button_group/mixed.R b/docs/components_page/components/button_group/mixed.R
new file mode 100644
index 000000000..cdf495682
--- /dev/null
+++ b/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")
+  )
+)
diff --git a/docs/components_page/components/button_group/mixed.jl b/docs/components_page/components/button_group/mixed.jl
new file mode 100644
index 000000000..803bf8dfe
--- /dev/null
+++ b/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"),
+])
diff --git a/docs/components_page/components/button_group/mixed.py b/docs/components_page/components/button_group/mixed.py
new file mode 100644
index 000000000..fffd097d0
--- /dev/null
+++ b/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"),
+    ]
+)
diff --git a/docs/components_page/components/button_group/outline.R b/docs/components_page/components/button_group/outline.R
new file mode 100644
index 000000000..4c422c3b5
--- /dev/null
+++ b/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")
+  )
+)
diff --git a/docs/components_page/components/button_group/outline.jl b/docs/components_page/components/button_group/outline.jl
new file mode 100644
index 000000000..b06d37fd6
--- /dev/null
+++ b/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"),
+])
diff --git a/docs/components_page/components/button_group/outline.py b/docs/components_page/components/button_group/outline.py
new file mode 100644
index 000000000..695c2dbe4
--- /dev/null
+++ b/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"),
+    ]
+)
diff --git a/docs/static/data_file.txt b/docs/static/data_file.txt
new file mode 100644
index 000000000..ea54e7a64
--- /dev/null
+++ b/docs/static/data_file.txt
@@ -0,0 +1 @@
+This is an example data file used to demonstrate the download option in Buttons.
\ No newline at end of file