Badges

Headings with badges

H1 with Badge

H2 with Badge

H3 with Badge

H4 with Badge

H5 with Badge

H6 with Badge

H5H1(H5String("H1 with "), BS5Badge(["bg-secondary"], "Badge")),
    H5H2(H5String("H2 with "), BS5Badge(["bg-secondary"], "Badge")),
    H5H3(H5String("H3 with "), BS5Badge(["bg-secondary"], "Badge")),
    H5H4(H5String("H4 with "), BS5Badge(["bg-secondary"], "Badge")),
    H5H5(H5String("H5 with "), BS5Badge(["bg-secondary"], "Badge")),
    H5H6(H5String("H6 with "), BS5Badge(["bg-secondary"], "Badge"))

H5H1(H5String("H1 mit "), BS5Badge(["bg-secondary"], "Badge"))
H5H2(H5String("H2 mit "), BS5Badge(["bg-secondary"], "Badge"))
H5H3(H5String("H3 mit "), BS5Badge(["bg-secondary"], "Badge"))
H5H4([H5String("H4 mit "), BS5Badge(["bg-secondary"], "Badge"))
H5H5(H5String("H5 mit "), BS5Badge(["bg-secondary"], "Badge"))
H5H6(H5String("H6 mit "), BS5Badge(["bg-secondary"], "Badge"))

Buttons with Badges

BS5Button(["btn-secondary"], H5String("Notifications "), BS5Badge(["bg-light", "text-dark"], "10"))

BS5Button(["btn-secondary"], H5String("Notifications "), BS5Badge(["bg-light", "text-dark"], "10"))

Buttons with accessible badges

BS5Button(["btn-secondary"], 
      H5String("Profile "),
      BS5Badge(["bg-light", "text-dark"], "3"),
      H5Span(["visually-hidden"], "unread messages"))

With background colors

PrimarySecondarySuccessDangerWarningInfoLightDark

BS5Badge(["bg-primary"], "Primary"), 
    BS5Badge(["bg-secondary"], "Secondary"), 
    BS5Badge(["bg-success"], "Success"), 
    BS5Badge(["bg-danger"], "Danger"), 
    BS5Badge(["bg-warning text-dark"], "Warning"), 
    BS5Badge(["bg-info"], "Info"), 
    BS5Badge(["bg-light", "text-dark"], "Light"), 
    BS5Badge(["bg-dark"], "Dark")

Pill style

PrimarySecondarySuccessDangerWarningInfoLightDark

BS5Badge(["rounded-pill", "bg-primary"], "Primary"),
    BS5Badge(["rounded-pill", "bg-secondary"], "Secondary"),
    BS5Badge(["rounded-pill", "bg-success"], "Success"),
    BS5Badge(["rounded-pill", "bg-danger"], "Danger"),
    BS5Badge(["rounded-pill", "bg-warning", "text-dark"], "Warning"),
    BS5Badge(["rounded-pill", "bg-info"], "Info"),
    BS5Badge(["rounded-pill", "bg-light", "text-dark"], "Light"),
    BS5Badge(["rounded-pill", "bg-dark"], "Dark")