diff --git a/docs/components_page/components/badge.md b/docs/components_page/components/badge.md index 7a9e80757..b85e5ecd1 100644 --- a/docs/components_page/components/badge.md +++ b/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}} diff --git a/docs/components_page/components/badge/color.R b/docs/components_page/components/badge/color.R index b1b7af87c..14f16f3b8 100644 --- a/docs/components_page/components/badge/color.R +++ b/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") ) ) diff --git a/docs/components_page/components/badge/color.jl b/docs/components_page/components/badge/color.jl index 548874d42..5d27b5bab 100644 --- a/docs/components_page/components/badge/color.jl +++ b/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"), ]); diff --git a/docs/components_page/components/badge/color.py b/docs/components_page/components/badge/color.py index e0a692c74..8487deeeb 100644 --- a/docs/components_page/components/badge/color.py +++ b/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"), ] ) diff --git a/docs/components_page/components/badge/links.R b/docs/components_page/components/badge/links.R index 1c1faf16a..9928997a5 100644 --- a/docs/components_page/components/badge/links.R +++ b/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") ) ) diff --git a/docs/components_page/components/badge/links.jl b/docs/components_page/components/badge/links.jl index 0cd26986d..ec6dcaf7e 100644 --- a/docs/components_page/components/badge/links.jl +++ b/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"), +],); diff --git a/docs/components_page/components/badge/links.py b/docs/components_page/components/badge/links.py index d10157409..3876729fb 100644 --- a/docs/components_page/components/badge/links.py +++ b/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" + ), ] ) diff --git a/docs/components_page/components/badge/pills.R b/docs/components_page/components/badge/pills.R index 49f9d20a6..a112104f7 100644 --- a/docs/components_page/components/badge/pills.R +++ b/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") ) ) diff --git a/docs/components_page/components/badge/pills.jl b/docs/components_page/components/badge/pills.jl index f5c8b531c..dab1a1645 100644 --- a/docs/components_page/components/badge/pills.jl +++ b/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"), ]); diff --git a/docs/components_page/components/badge/pills.py b/docs/components_page/components/badge/pills.py index 10fb67d7e..84ce342e5 100644 --- a/docs/components_page/components/badge/pills.py +++ b/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"), ] diff --git a/docs/components_page/components/badge/positioned.R b/docs/components_page/components/badge/positioned.R new file mode 100644 index 000000000..58031ebf3 --- /dev/null +++ b/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" +) diff --git a/docs/components_page/components/badge/positioned.jl b/docs/components_page/components/badge/positioned.jl new file mode 100644 index 000000000..a2195ab7c --- /dev/null +++ b/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", +) diff --git a/docs/components_page/components/badge/positioned.py b/docs/components_page/components/badge/positioned.py new file mode 100644 index 000000000..559729c26 --- /dev/null +++ b/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", +) diff --git a/docs/components_page/components/badge/simple.R b/docs/components_page/components/badge/simple.R index fff301f21..24b00fe4c 100644 --- a/docs/components_page/components/badge/simple.R +++ b/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", ) diff --git a/docs/components_page/components/badge/simple.jl b/docs/components_page/components/badge/simple.jl index 28704d29f..212f71bc1 100644 --- a/docs/components_page/components/badge/simple.jl +++ b/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", ); diff --git a/docs/components_page/components/badge/simple.py b/docs/components_page/components/badge/simple.py index ec5da02eb..447bcbb48 100644 --- a/docs/components_page/components/badge/simple.py +++ b/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", ) diff --git a/docs/components_page/components/badge/text_color.R b/docs/components_page/components/badge/text_color.R new file mode 100644 index 000000000..fe0af876f --- /dev/null +++ b/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") + ) +) diff --git a/docs/components_page/components/badge/text_color.jl b/docs/components_page/components/badge/text_color.jl new file mode 100644 index 000000000..1e05b7127 --- /dev/null +++ b/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"), +]) diff --git a/docs/components_page/components/badge/text_color.py b/docs/components_page/components/badge/text_color.py new file mode 100644 index 000000000..e313befe5 --- /dev/null +++ b/docs/components_page/components/badge/text_color.py @@ -0,0 +1,64 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html + +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" + ), + ] +)