Adapted badge examples

docs/components_page/components/badge.md

@@ -21,15 +21,27 @@ Use the `color` argument to apply one of Bootstrap's contextual color classes.
 
 {{example:components/badge/color.py:badges}}
 
+## Text colors
+
+Use the `text_color` argument to apply one of Bootstrap's contextual color classes to the font.
+
+{{example:components/badge/text_color.py:badges}}
+
 ## Pill badges
 
 Set `pill=True` to make the badges more rounded (with a larger `border-radius` and additional horizontal padding).
 
 {{example:components/badge/pills.py:badges}}
 
+## Positioning
+
+Use the Bootstrap's [position utility classes](https://getbootstrap.com/docs/5.0/utilities/position/) to modify a badge and position it in the corner of a link or button.
+
+{{example:components/badge/positioned.py:badge}}
+
 ## Links
 
-Add a link with the `href` argument to create actionable badges with hover and focus states.
+Add a link with the `href` argument to create actionable badges with hover and focus states. In Bootstrap 5 links are underlined by default. You can use the `text-decoration-none` class to override this if you wish.
 
 {{example:components/badge/links.py:badges}}
 

docs/components_page/components/badge/color.R

@@ -9,7 +9,7 @@ badges <- htmlSpan(
     dbcBadge("Warning", color = "warning", class_name = "me-1"),
     dbcBadge("Danger", color = "danger", class_name = "me-1"),
     dbcBadge("Info", color = "info", class_name = "me-1"),
-    dbcBadge("Light", color = "light", class_name = "me-1"),
+    dbcBadge("Light", text_color = "dark", color = "light", class_name = "me-1"),
     dbcBadge("Dark", color = "dark")
   )
 )

docs/components_page/components/badge/color.jl

@@ -7,6 +7,6 @@ badges = html_span([
     dbc_badge("Warning", color = "warning", class_name = "me-1"),
     dbc_badge("Danger", color = "danger", class_name = "me-1"),
     dbc_badge("Info", color = "info", class_name = "me-1"),
-    dbc_badge("Light", color = "light", class_name = "me-1"),
+    dbc_badge("Light", color = "light", text_color = "dark", class_name = "me-1"),
     dbc_badge("Dark", color = "dark"),
 ]);

docs/components_page/components/badge/color.py

@@ -9,7 +9,9 @@
         dbc.Badge("Warning", color="warning", class_name="me-1"),
         dbc.Badge("Danger", color="danger", class_name="me-1"),
         dbc.Badge("Info", color="info", class_name="me-1"),
-        dbc.Badge("Light", color="light", class_name="me-1"),
+        dbc.Badge(
+            "Light", text_color="dark", color="light", class_name="me-1"
+        ),
         dbc.Badge("Dark", color="dark"),
     ]
 )

docs/components_page/components/badge/links.R

@@ -3,13 +3,13 @@ library(dashHtmlComponents)
 
 badges <- htmlSpan(
   list(
-    dbcBadge("Primary", href = "#", color = "primary", class_name = "me-1"),
-    dbcBadge("Secondary", href = "#", color = "secondary", class_name = "me-1"),
-    dbcBadge("Success", href = "#", color = "success", class_name = "me-1"),
-    dbcBadge("Warning", href = "#", color = "warning", class_name = "me-1"),
-    dbcBadge("Danger", href = "#", color = "danger", class_name = "me-1"),
-    dbcBadge("Info", href = "#", color = "info", class_name = "me-1"),
-    dbcBadge("Light", href = "#", color = "light", class_name = "me-1"),
-    dbcBadge("Dark", href = "#", color = "dark")
+    dbcBadge("Primary", href = "#", color = "primary", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Secondary", href = "#", color = "secondary", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Success", href = "#", color = "success", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Warning", href = "#", color = "warning", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Danger", href = "#", color = "danger", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Info", href = "#", color = "info", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Light", href = "#", color = "light", text_color = "dark", class_name = "me-1 text-decoration-none"),
+    dbcBadge("Dark", href = "#", color = "dark", class_name = "text-decoration-none")
   )
 )

docs/components_page/components/badge/links.jl

@@ -1,12 +1,43 @@
 using DashBootstrapComponents, DashHtmlComponents
 
 badges = html_span([
-    dbc_badge("Primary", href = "#", color = "primary", class_name = "me-1"),
-    dbc_badge("Secondary", href = "#", color = "secondary", class_name = "me-1"),
-    dbc_badge("Success", href = "#", color = "success", class_name = "me-1"),
-    dbc_badge("Warning", href = "#", color = "warning", class_name = "me-1"),
-    dbc_badge("Danger", href = "#", color = "danger", class_name = "me-1"),
-    dbc_badge("Info", href = "#", color = "info", class_name = "me-1"),
-    dbc_badge("Light", href = "#", color = "light", class_name = "me-1"),
-    dbc_badge("Dark", href = "#", color = "dark"),
-]);
+    dbc_badge(
+        "Primary",
+        href = "#",
+        color = "primary",
+        class_name = "me-1 text-decoration-none",
+    ),
+    dbc_badge(
+        "Secondary",
+        href = "#",
+        color = "secondary",
+        class_name = "me-1 text-decoration-none",
+    ),
+    dbc_badge(
+        "Success",
+        href = "#",
+        color = "success",
+        class_name = "me-1 text-decoration-none",
+    ),
+    dbc_badge(
+        "Warning",
+        href = "#",
+        color = "warning",
+        class_name = "me-1 text-decoration-none",
+    ),
+    dbc_badge(
+        "Danger",
+        href = "#",
+        color = "danger",
+        class_name = "me-1 text-decoration-none",
+    ),
+    dbc_badge("Info", href = "#", color = "info", class_name = "me-1 text-decoration-none"),
+    dbc_badge(
+        "Light",
+        href = "#",
+        color = "light",
+        text_color = "dark",
+        class_name = "me-1 text-decoration-none",
+    ),
+    dbc_badge("Dark", href = "#", color = "dark", class_name = "text-decoration-none"),
+],);

docs/components_page/components/badge/links.py

@@ -3,13 +3,51 @@
 
 badges = html.Span(
     [
-        dbc.Badge("Primary", href="#", color="primary", class_name="me-1"),
-        dbc.Badge("Secondary", href="#", color="secondary", class_name="me-1"),
-        dbc.Badge("Success", href="#", color="success", class_name="me-1"),
-        dbc.Badge("Warning", href="#", color="warning", class_name="me-1"),
-        dbc.Badge("Danger", href="#", color="danger", class_name="me-1"),
-        dbc.Badge("Info", href="#", color="info", class_name="me-1"),
-        dbc.Badge("Light", href="#", color="light", class_name="me-1"),
-        dbc.Badge("Dark", href="#", color="dark"),
+        dbc.Badge(
+            "Primary",
+            href="#",
+            color="primary",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Secondary",
+            href="#",
+            color="secondary",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Success",
+            href="#",
+            color="success",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Warning",
+            href="#",
+            color="warning",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Danger",
+            href="#",
+            color="danger",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Info",
+            href="#",
+            color="info",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Light",
+            href="#",
+            color="light",
+            text_color="dark",
+            class_name="me-1 text-decoration-none",
+        ),
+        dbc.Badge(
+            "Dark", href="#", color="dark", class_name="text-decoration-none"
+        ),
     ]
 )

docs/components_page/components/badge/pills.R

@@ -9,7 +9,7 @@ badges <- htmlSpan(
     dbcBadge("Warning", pill = TRUE, color = "warning", class_name = "me-1"),
     dbcBadge("Danger", pill = TRUE, color = "danger", class_name = "me-1"),
     dbcBadge("Info", pill = TRUE, color = "info", class_name = "me-1"),
-    dbcBadge("Light", pill = TRUE, color = "light", class_name = "me-1 text-dark"),
+    dbcBadge("Light", pill = TRUE, color = "light", text_color = "dark", class_name = "me-1"),
     dbcBadge("Dark", pill = TRUE, color = "dark")
   )
 )

docs/components_page/components/badge/pills.jl

@@ -7,6 +7,12 @@ badges = html_span([
     dbc_badge("Warning", pill = true, color = "warning", class_name = "me-1"),
     dbc_badge("Danger", pill = true, color = "danger", class_name = "me-1"),
     dbc_badge("Info", pill = true, color = "info", class_name = "me-1"),
-    dbc_badge("Light", pill = true, color = "light", class_name = "me-1 text-dark"),
+    dbc_badge(
+        "Light",
+        pill = true,
+        color = "light",
+        text_color = "dark",
+        class_name = "me-1",
+    ),
     dbc_badge("Dark", pill = true, color = "dark"),
 ]);

docs/components_page/components/badge/pills.py

@@ -12,7 +12,11 @@
         dbc.Badge("Danger", pill=True, color="danger", class_name="me-1"),
         dbc.Badge("Info", pill=True, color="info", class_name="me-1"),
         dbc.Badge(
-            "Light", pill=True, color="light", class_name="me-1 text-dark"
+            "Light",
+            pill=True,
+            color="light",
+            text_color="dark",
+            class_name="me-1",
         ),
         dbc.Badge("Dark", pill=True, color="dark"),
     ]

docs/components_page/components/badge/positioned.R

@@ -0,0 +1,16 @@
+library(dashBootstrapComponents)
+
+badge <- dbcButton(
+  list(
+    "Notifications",
+    dbcBadge(
+      "99+",
+      color = "danger",
+      pill = TRUE,
+      text_color = "white",
+      class_name = "position-absolute top-0 start-100 translate-middle"
+    )
+  ),
+  color = "primary",
+  class_name = "position-relative"
+)

docs/components_page/components/badge/positioned.jl

@@ -0,0 +1,16 @@
+using DashBootstrapComponents
+
+badge = dbc_button(
+    [
+        "Notifications",
+        dbc_badge(
+            "99+",
+            color = "danger",
+            pill = true,
+            text_color = "white",
+            class_name = "position-absolute top-0 start-100 translate-middle",
+        ),
+    ],
+    color = "primary",
+    class_name = "position-relative",
+)

docs/components_page/components/badge/positioned.py

@@ -0,0 +1,16 @@
+import dash_bootstrap_components as dbc
+
+badge = dbc.Button(
+    [
+        "Notifications",
+        dbc.Badge(
+            "99+",
+            color="danger",
+            pill=True,
+            text_color="white",
+            class_name="position-absolute top-0 start-100 translate-middle",
+        ),
+    ],
+    color="primary",
+    class_name="position-relative",
+)

docs/components_page/components/badge/simple.R

@@ -3,7 +3,7 @@ library(dashBootstrapComponents)
 badge <- dbcButton(
   list(
     "Notifications",
-    dbcBadge("4", color = "light", class_name = "ms-1 text-primary")
+    dbcBadge("4", color = "light", text_color = "primary", class_name = "ms-1")
   ),
   color = "primary",
 )

docs/components_page/components/badge/simple.jl

@@ -1,6 +1,9 @@
 using DashBootstrapComponents
 
 badge = dbc_button(
-    ["Notifications", dbc_badge("4", color = "light", class_name = "ms-1 text-primary")],
+    [
+        "Notifications",
+        dbc_badge("4", color = "light", text_color = "primary", class_name = "ms-1"),
+    ],
     color = "primary",
 );

docs/components_page/components/badge/simple.py

@@ -3,7 +3,7 @@
 badge = dbc.Button(
     [
         "Notifications",
-        dbc.Badge("4", color="light", class_name="ms-1 text-primary"),
+        dbc.Badge("4", color="light", text_color="primary", class_name="ms-1"),
     ],
     color="primary",
 )

docs/components_page/components/badge/text_color.R

@@ -0,0 +1,18 @@
+library(dashBootstrapComponents)
+library(dashHtmlComponents)
+
+badges <- htmlSpan(
+  list(
+    dbcBadge("Primary", color = "white", text_color = "primary", class_name = "border me-1"),
+    dbcBadge("Secondary", color = "white", text_color = "secondary", class_name = "border me-1"),
+    dbcBadge("Success", color = "white", text_color = "success", class_name = "border me-1"),
+    dbcBadge("Warning", color = "white", text_color = "warning", class_name = "border me-1"),
+    dbcBadge("Danger", color = "white", text_color = "danger", class_name = "border me-1"),
+    dbcBadge("Info", color = "white", text_color = "info", class_name = "border me-1"),
+    dbcBadge("Dark", color = "white", text_color = "dark", class_name = "border me-1"),
+    dbcBadge("Black", color = "white", text_color = "black", class_name = "border me-1"),
+    dbcBadge("Muted", color = "white", text_color = "muted", class_name = "border me-1"),
+    dbcBadge("Light", color = "secondary", text_color = "light", class_name = "border me-1"),
+    dbcBadge("White", color = "secondary", text_color = "white", class_name = "border")
+  )
+)

docs/components_page/components/badge/text_color.jl

@@ -0,0 +1,40 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+badges = html_span([
+    dbc_badge(
+        "Primary",
+        color = "white",
+        text_color = "primary",
+        class_name = "border me-1",
+    ),
+    dbc_badge(
+        "Secondary",
+        color = "white",
+        text_color = "secondary",
+        class_name = "border me-1",
+    ),
+    dbc_badge(
+        "Success",
+        color = "white",
+        text_color = "success",
+        class_name = "border me-1",
+    ),
+    dbc_badge(
+        "Warning",
+        color = "white",
+        text_color = "warning",
+        class_name = "border me-1",
+    ),
+    dbc_badge("Danger", color = "white", text_color = "danger", class_name = "border me-1"),
+    dbc_badge("Info", color = "white", text_color = "info", class_name = "border me-1"),
+    dbc_badge("Dark", color = "white", text_color = "dark", class_name = "border me-1"),
+    dbc_badge("Black", color = "white", text_color = "black", class_name = "border me-1"),
+    dbc_badge("Muted", color = "white", text_color = "muted", class_name = "border me-1"),
+    dbc_badge(
+        "Light",
+        color = "secondary",
+        text_color = "light",
+        class_name = "border me-1",
+    ),
+    dbc_badge("White", color = "secondary", text_color = "white", class_name = "border"),
+])