badge

Badges are used to inform the user of the status of specific data.

Base Badge

The base badge component:

badge = SingleValueFactory("badge", "Badge container element") # Badge container

Badge Colors

Badge color variants using daisyUI semantic colors:

badge_colors = enums_to_simple_factory(badge, [SemanticColorBrand, SemanticColorStatus], "Badge color variants using daisyUI semantic colors") # Badge color variants

Badge Styles

Different badge style variants:

badge_styles = enums_to_simple_factory(badge, [OutlineStyle, DashStyle, SoftStyle, GhostStyle], "Badge style variants (outline, dash, soft, ghost)") # Badge style variants

Badge Sizes

Badge size variants:

badge_sizes = enums_to_simple_factory(badge, [DaisyUINamedSize], "Badge size variants from extra small to extra large") # Badge size variants

Badge Test Examples

---

source

test_badge_basic_examples

 test_badge_basic_examples ()

Test basic badge utilities.

def test_badge_basic_examples():
    """Test basic badge utilities."""
    # Basic badge
    assert str(badge) == "badge"
    
    # With modifiers
    assert str(badge.hover) == "hover:badge"
    assert str(badge.md) == "md:badge"
    assert str(badge.dark) == "dark:badge"

# Run the tests
test_badge_basic_examples()

---

source

test_badge_colors_examples

 test_badge_colors_examples ()

Test badge color variants.

def test_badge_colors_examples():
    """Test badge color variants."""
    # All color variants
    assert str(badge_colors.neutral) == "badge-neutral"
    assert str(badge_colors.primary) == "badge-primary"
    assert str(badge_colors.secondary) == "badge-secondary"
    assert str(badge_colors.accent) == "badge-accent"
    assert str(badge_colors.info) == "badge-info"
    assert str(badge_colors.success) == "badge-success"
    assert str(badge_colors.warning) == "badge-warning"
    assert str(badge_colors.error) == "badge-error"
    
    # With modifiers
    assert str(badge_colors.primary.hover) == "hover:badge-primary"
    assert str(badge_colors.success.focus) == "focus:badge-success"

# Run the tests
test_badge_colors_examples()

---

source

test_badge_styles_examples

 test_badge_styles_examples ()

Test badge style variants.

def test_badge_styles_examples():
    """Test badge style variants."""
    assert str(badge_styles.outline) == "badge-outline"
    assert str(badge_styles.dash) == "badge-dash"
    assert str(badge_styles.soft) == "badge-soft"
    assert str(badge_styles.ghost) == "badge-ghost"

# Run the tests
test_badge_styles_examples()

---

source

test_badge_sizes_examples

 test_badge_sizes_examples ()

Test badge size variants.

def test_badge_sizes_examples():
    """Test badge size variants."""
    assert str(badge_sizes.xs) == "badge-xs"
    assert str(badge_sizes.sm) == "badge-sm"
    assert str(badge_sizes.md) == "badge-md"
    assert str(badge_sizes.lg) == "badge-lg"
    assert str(badge_sizes.xl) == "badge-xl"
    
    # With responsive modifiers
    assert str(badge_sizes.xs.sm) == "sm:badge-xs"
    assert str(badge_sizes.lg.md) == "md:badge-lg"

# Run the tests
test_badge_sizes_examples()

---

source

test_badge_basic_fasthtml_examples

 test_badge_basic_fasthtml_examples ()

Test basic badge and badge sizes from daisyUI v5 documentation.

def test_badge_basic_fasthtml_examples():
    """Test basic badge and badge sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Basic badge
    basic_badge = Span("Badge", cls=str(badge))
    assert basic_badge.tag == "span"
    assert basic_badge.attrs['class'] == "badge"
    assert basic_badge.children[0] == "Badge"
    
    # Badge sizes
    xs_badge = Div("Xsmall", cls=combine_classes(badge, badge_sizes.xs))
    assert xs_badge.tag == "div"
    assert "badge" in xs_badge.attrs['class']
    assert "badge-xs" in xs_badge.attrs['class']
    assert xs_badge.children[0] == "Xsmall"
    
    sm_badge = Div("Small", cls=combine_classes(badge, badge_sizes.sm))
    assert "badge" in sm_badge.attrs['class']
    assert "badge-sm" in sm_badge.attrs['class']
    assert sm_badge.children[0] == "Small"
    
    md_badge = Div("Medium", cls=combine_classes(badge, badge_sizes.md))
    assert "badge" in md_badge.attrs['class']
    assert "badge-md" in md_badge.attrs['class']
    assert md_badge.children[0] == "Medium"
    
    lg_badge = Div("Large", cls=combine_classes(badge, badge_sizes.lg))
    assert "badge" in lg_badge.attrs['class']
    assert "badge-lg" in lg_badge.attrs['class']
    assert lg_badge.children[0] == "Large"
    
    xl_badge = Div("Xlarge", cls=combine_classes(badge, badge_sizes.xl))
    assert "badge" in xl_badge.attrs['class']
    assert "badge-xl" in xl_badge.attrs['class']
    assert xl_badge.children[0] == "Xlarge"
    
    # Return all elements in a Div
    return Div(
        basic_badge,
        xs_badge,
        sm_badge,
        md_badge,
        lg_badge,
        xl_badge
    )

# Run the tests
test_badge_basic_fasthtml_examples()

<div>
<span class="badge">Badge</span>  <div class="badge badge-xs">Xsmall</div>
  <div class="badge badge-sm">Small</div>
  <div class="badge badge-md">Medium</div>
  <div class="badge badge-lg">Large</div>
  <div class="badge badge-xl">Xlarge</div>
</div>

test_func = test_badge_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_badge_colors_fasthtml_examples

 test_badge_colors_fasthtml_examples ()

Test badge with colors from daisyUI v5 documentation.

def test_badge_colors_fasthtml_examples():
    """Test badge with colors from daisyUI v5 documentation."""
    from fasthtml.common import Div
    
    # Badge with colors
    primary_badge = Div("Primary", cls=combine_classes(badge, badge_colors.primary))
    assert primary_badge.tag == "div"
    assert "badge" in primary_badge.attrs['class']
    assert "badge-primary" in primary_badge.attrs['class']
    assert primary_badge.children[0] == "Primary"
    
    secondary_badge = Div("Secondary", cls=combine_classes(badge, badge_colors.secondary))
    assert "badge" in secondary_badge.attrs['class']
    assert "badge-secondary" in secondary_badge.attrs['class']
    assert secondary_badge.children[0] == "Secondary"
    
    accent_badge = Div("Accent", cls=combine_classes(badge, badge_colors.accent))
    assert "badge" in accent_badge.attrs['class']
    assert "badge-accent" in accent_badge.attrs['class']
    assert accent_badge.children[0] == "Accent"
    
    neutral_badge = Div("Neutral", cls=combine_classes(badge, badge_colors.neutral))
    assert "badge" in neutral_badge.attrs['class']
    assert "badge-neutral" in neutral_badge.attrs['class']
    assert neutral_badge.children[0] == "Neutral"
    
    info_badge = Div("Info", cls=combine_classes(badge, badge_colors.info))
    assert "badge" in info_badge.attrs['class']
    assert "badge-info" in info_badge.attrs['class']
    assert info_badge.children[0] == "Info"
    
    success_badge = Div("Success", cls=combine_classes(badge, badge_colors.success))
    assert "badge" in success_badge.attrs['class']
    assert "badge-success" in success_badge.attrs['class']
    assert success_badge.children[0] == "Success"
    
    warning_badge = Div("Warning", cls=combine_classes(badge, badge_colors.warning))
    assert "badge" in warning_badge.attrs['class']
    assert "badge-warning" in warning_badge.attrs['class']
    assert warning_badge.children[0] == "Warning"
    
    error_badge = Div("Error", cls=combine_classes(badge, badge_colors.error))
    assert "badge" in error_badge.attrs['class']
    assert "badge-error" in error_badge.attrs['class']
    assert error_badge.children[0] == "Error"
    
    # Return all elements in a Div
    return Div(
        primary_badge,
        secondary_badge,
        accent_badge,
        neutral_badge,
        info_badge,
        success_badge,
        warning_badge,
        error_badge
    )

# Run the tests
test_badge_colors_fasthtml_examples()

<div>
  <div class="badge badge-primary">Primary</div>
  <div class="badge badge-secondary">Secondary</div>
  <div class="badge badge-accent">Accent</div>
  <div class="badge badge-neutral">Neutral</div>
  <div class="badge badge-info">Info</div>
  <div class="badge badge-success">Success</div>
  <div class="badge badge-warning">Warning</div>
  <div class="badge badge-error">Error</div>
</div>

test_func = test_badge_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_badge_style_fasthtml_examples

 test_badge_style_fasthtml_examples ()

Test badge with different styles from daisyUI v5 documentation.

def test_badge_style_fasthtml_examples():
    """Test badge with different styles from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.spacing import p
    
    # Badge with soft style
    soft_primary = Div("Primary", cls=combine_classes(badge, badge_styles.soft, badge_colors.primary))
    assert "badge" in soft_primary.attrs['class']
    assert "badge-soft" in soft_primary.attrs['class']
    assert "badge-primary" in soft_primary.attrs['class']
    assert soft_primary.children[0] == "Primary"
    
    soft_secondary = Div("Secondary", cls=combine_classes(badge, badge_styles.soft, badge_colors.secondary))
    assert "badge-soft" in soft_secondary.attrs['class']
    assert "badge-secondary" in soft_secondary.attrs['class']
    
    soft_accent = Div("Accent", cls=combine_classes(badge, badge_styles.soft, badge_colors.accent))
    assert "badge-soft" in soft_accent.attrs['class']
    assert "badge-accent" in soft_accent.attrs['class']
    
    soft_info = Div("Info", cls=combine_classes(badge, badge_styles.soft, badge_colors.info))
    assert "badge-soft" in soft_info.attrs['class']
    assert "badge-info" in soft_info.attrs['class']
    
    soft_success = Div("Success", cls=combine_classes(badge, badge_styles.soft, badge_colors.success))
    assert "badge-soft" in soft_success.attrs['class']
    assert "badge-success" in soft_success.attrs['class']
    
    soft_warning = Div("Warning", cls=combine_classes(badge, badge_styles.soft, badge_colors.warning))
    assert "badge-soft" in soft_warning.attrs['class']
    assert "badge-warning" in soft_warning.attrs['class']
    
    soft_error = Div("Error", cls=combine_classes(badge, badge_styles.soft, badge_colors.error))
    assert "badge-soft" in soft_error.attrs['class']
    assert "badge-error" in soft_error.attrs['class']
    
    # Badge with outline style
    outline_primary = Div("Primary", cls=combine_classes(badge, badge_styles.outline, badge_colors.primary))
    assert "badge-outline" in outline_primary.attrs['class']
    assert "badge-primary" in outline_primary.attrs['class']
    
    outline_secondary = Div("Secondary", cls=combine_classes(badge, badge_styles.outline, badge_colors.secondary))
    assert "badge-outline" in outline_secondary.attrs['class']
    assert "badge-secondary" in outline_secondary.attrs['class']
    
    outline_accent = Div("Accent", cls=combine_classes(badge, badge_styles.outline, badge_colors.accent))
    assert "badge-outline" in outline_accent.attrs['class']
    assert "badge-accent" in outline_accent.attrs['class']
    
    outline_info = Div("Info", cls=combine_classes(badge, badge_styles.outline, badge_colors.info))
    assert "badge-outline" in outline_info.attrs['class']
    assert "badge-info" in outline_info.attrs['class']
    
    outline_success = Div("Success", cls=combine_classes(badge, badge_styles.outline, badge_colors.success))
    assert "badge-outline" in outline_success.attrs['class']
    assert "badge-success" in outline_success.attrs['class']
    
    outline_warning = Div("Warning", cls=combine_classes(badge, badge_styles.outline, badge_colors.warning))
    assert "badge-outline" in outline_warning.attrs['class']
    assert "badge-warning" in outline_warning.attrs['class']
    
    outline_error = Div("Error", cls=combine_classes(badge, badge_styles.outline, badge_colors.error))
    assert "badge-outline" in outline_error.attrs['class']
    assert "badge-error" in outline_error.attrs['class']
    
    # Badge with dash style
    dash_primary = Div("Primary", cls=combine_classes(badge, badge_styles.dash, badge_colors.primary))
    assert "badge-dash" in dash_primary.attrs['class']
    assert "badge-primary" in dash_primary.attrs['class']
    
    dash_secondary = Div("Secondary", cls=combine_classes(badge, badge_styles.dash, badge_colors.secondary))
    assert "badge-dash" in dash_secondary.attrs['class']
    assert "badge-secondary" in dash_secondary.attrs['class']
    
    dash_accent = Div("Accent", cls=combine_classes(badge, badge_styles.dash, badge_colors.accent))
    assert "badge-dash" in dash_accent.attrs['class']
    assert "badge-accent" in dash_accent.attrs['class']
    
    dash_info = Div("Info", cls=combine_classes(badge, badge_styles.dash, badge_colors.info))
    assert "badge-dash" in dash_info.attrs['class']
    assert "badge-info" in dash_info.attrs['class']
    
    dash_success = Div("Success", cls=combine_classes(badge, badge_styles.dash, badge_colors.success))
    assert "badge-dash" in dash_success.attrs['class']
    assert "badge-success" in dash_success.attrs['class']
    
    dash_warning = Div("Warning", cls=combine_classes(badge, badge_styles.dash, badge_colors.warning))
    assert "badge-dash" in dash_warning.attrs['class']
    assert "badge-warning" in dash_warning.attrs['class']
    
    dash_error = Div("Error", cls=combine_classes(badge, badge_styles.dash, badge_colors.error))
    assert "badge-dash" in dash_error.attrs['class']
    assert "badge-error" in dash_error.attrs['class']
    
    # Neutral badge with outline/dash style on white background
    neutral_badges_container = Div(
        Div("Outline", cls=combine_classes(badge, badge_colors.neutral, badge_styles.outline)),
        Div("Dash", cls=combine_classes(badge, badge_colors.neutral, badge_styles.dash)),
        cls=combine_classes(bg.white, p._6)
    )
    assert "bg-white" in neutral_badges_container.attrs['class']
    assert "p-6" in neutral_badges_container.attrs['class']
    assert "badge-neutral" in neutral_badges_container.children[0].attrs['class']
    assert "badge-outline" in neutral_badges_container.children[0].attrs['class']
    assert "badge-neutral" in neutral_badges_container.children[1].attrs['class']
    assert "badge-dash" in neutral_badges_container.children[1].attrs['class']
    
    # Badge ghost
    ghost_badge = Div("ghost", cls=combine_classes(badge, badge_styles.ghost))
    assert "badge" in ghost_badge.attrs['class']
    assert "badge-ghost" in ghost_badge.attrs['class']
    assert ghost_badge.children[0] == "ghost"
    
    # Empty badges
    empty_lg = Div(cls=combine_classes(badge, badge_colors.primary, badge_sizes.lg))
    assert "badge" in empty_lg.attrs['class']
    assert "badge-primary" in empty_lg.attrs['class']
    assert "badge-lg" in empty_lg.attrs['class']
    assert empty_lg.children == ()
    
    empty_md = Div(cls=combine_classes(badge, badge_colors.primary, badge_sizes.md))
    assert "badge-md" in empty_md.attrs['class']
    assert empty_md.children == ()
    
    empty_sm = Div(cls=combine_classes(badge, badge_colors.primary, badge_sizes.sm))
    assert "badge-sm" in empty_sm.attrs['class']
    assert empty_sm.children == ()
    
    empty_xs = Div(cls=combine_classes(badge, badge_colors.primary, badge_sizes.xs))
    assert "badge-xs" in empty_xs.attrs['class']
    assert empty_xs.children == ()
    
    # Return all elements in a Div
    return Div(
        # Soft style badges
        Div(
            soft_primary,
            soft_secondary,
            soft_accent,
            soft_info,
            soft_success,
            soft_warning,
            soft_error
        ),
        # Outline style badges
        Div(
            outline_primary,
            outline_secondary,
            outline_accent,
            outline_info,
            outline_success,
            outline_warning,
            outline_error
        ),
        # Dash style badges
        Div(
            dash_primary,
            dash_secondary,
            dash_accent,
            dash_info,
            dash_success,
            dash_warning,
            dash_error
        ),
        # Neutral badges container
        neutral_badges_container,
        # Ghost badge
        ghost_badge,
        # Empty badges
        Div(
            empty_lg,
            empty_md,
            empty_sm,
            empty_xs
        )
    )

# Run the tests
test_badge_style_fasthtml_examples()

<div>
  <div>
    <div class="badge badge-soft badge-primary">Primary</div>
    <div class="badge badge-soft badge-secondary">Secondary</div>
    <div class="badge badge-soft badge-accent">Accent</div>
    <div class="badge badge-soft badge-info">Info</div>
    <div class="badge badge-soft badge-success">Success</div>
    <div class="badge badge-soft badge-warning">Warning</div>
    <div class="badge badge-soft badge-error">Error</div>
  </div>
  <div>
    <div class="badge badge-outline badge-primary">Primary</div>
    <div class="badge badge-outline badge-secondary">Secondary</div>
    <div class="badge badge-outline badge-accent">Accent</div>
    <div class="badge badge-outline badge-info">Info</div>
    <div class="badge badge-outline badge-success">Success</div>
    <div class="badge badge-outline badge-warning">Warning</div>
    <div class="badge badge-outline badge-error">Error</div>
  </div>
  <div>
    <div class="badge badge-dash badge-primary">Primary</div>
    <div class="badge badge-dash badge-secondary">Secondary</div>
    <div class="badge badge-dash badge-accent">Accent</div>
    <div class="badge badge-dash badge-info">Info</div>
    <div class="badge badge-dash badge-success">Success</div>
    <div class="badge badge-dash badge-warning">Warning</div>
    <div class="badge badge-dash badge-error">Error</div>
  </div>
  <div class="bg-white p-6">
    <div class="badge badge-neutral badge-outline">Outline</div>
    <div class="badge badge-neutral badge-dash">Dash</div>
  </div>
  <div class="badge badge-ghost">ghost</div>
  <div>
    <div class="badge badge-primary badge-lg"></div>
    <div class="badge badge-primary badge-md"></div>
    <div class="badge badge-primary badge-sm"></div>
    <div class="badge badge-primary badge-xs"></div>
  </div>
</div>

test_func = test_badge_style_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_badge_icon_fasthtml_examples

 test_badge_icon_fasthtml_examples ()

Test badge with icon from daisyUI v5 documentation.

def test_badge_icon_fasthtml_examples():
    """Test badge with icon from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from fasthtml.svg import Svg, G, Circle, Path, Polyline, Rect, Line
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.svg import fill, stroke, stroke_width
    
    # Create reusable SVG icons
    info_icon = Svg(
        G(
            Circle(cx="12", cy="12", r="10", fill="none", stroke="currentColor", 
                   stroke_linecap="square", stroke_miterlimit="10", stroke_width="2"),
            Path(d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5", fill="none", stroke="currentColor", 
                 stroke_linecap="square", stroke_miterlimit="10", stroke_width="2"),
            Circle(cx="12", cy="7.25", r="1.25", fill="currentColor", stroke_width="2"),
            fill="currentColor", stroke_linejoin="miter", stroke_linecap="butt"
        ),
        cls=str(size_util("[1em]")), xmlns="http://www.w3.org/2000/svg", viewBox="0 0 24 24"
    )
    
    success_icon = Svg(
        G(
            Circle(cx="12", cy="12", r="10", fill="none", stroke="currentColor", 
                   stroke_linecap="square", stroke_miterlimit="10", stroke_width="2"),
            Polyline(points="7 13 10 16 17 8", fill="none", stroke="currentColor", 
                      stroke_linecap="square", stroke_miterlimit="10", stroke_width="2"),
            fill="currentColor", stroke_linejoin="miter", stroke_linecap="butt"
        ),
        cls=str(size_util("[1em]")), xmlns="http://www.w3.org/2000/svg", viewBox="0 0 24 24"
    )
    
    warning_icon = Svg(
        G(
            Path(d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z", 
                 fill="none", stroke="currentColor", stroke_linecap="round", stroke_linejoin="round", stroke_width="1.5"),
            Line(x1="9", y1="6.5", x2="9", y2="10", fill="none", stroke="currentColor", 
                 stroke_linecap="round", stroke_linejoin="round", stroke_width="1.5"),
            Path(d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z", 
                 fill="currentColor", data_stroke="none", stroke="none"),
            fill="currentColor"
        ),
        cls=str(size_util("[1em]")), xmlns="http://www.w3.org/2000/svg", viewBox="0 0 18 18"
    )
    
    error_icon = Svg(
        G(
            Rect(x="1.972", y="11", width="20.056", height="2", 
                 transform="translate(-4.971 12) rotate(-45)", fill="currentColor", stroke_width="0"),
            Path(d="m12,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-20C7.038,3,3,7.037,3,12s4.038,9,9,9,9-4.037,9-9S16.962,3,12,3Z", 
                 stroke_width="0", fill="currentColor"),
            fill="currentColor"
        ),
        cls=str(size_util("[1em]")), xmlns="http://www.w3.org/2000/svg", viewBox="0 0 24 24"
    )
    
    # Badge with icon
    info_badge = Div(
        info_icon,
        "Info",
        cls=combine_classes(badge, badge_colors.info)
    )
    assert info_badge.tag == "div"
    assert "badge" in info_badge.attrs['class']
    assert "badge-info" in info_badge.attrs['class']
    assert info_badge.children[0].tag == "svg"
    assert info_badge.children[1] == "Info"
    
    success_badge = Div(
        success_icon,
        "Success",
        cls=combine_classes(badge, badge_colors.success)
    )
    assert "badge-success" in success_badge.attrs['class']
    assert success_badge.children[0].tag == "svg"
    assert success_badge.children[1] == "Success"
    
    warning_badge = Div(
        warning_icon,
        "Warning",
        cls=combine_classes(badge, badge_colors.warning)
    )
    assert "badge-warning" in warning_badge.attrs['class']
    assert warning_badge.children[0].tag == "svg"
    assert warning_badge.children[1] == "Warning"
    
    error_badge = Div(
        error_icon,
        "Error",
        cls=combine_classes(badge, badge_colors.error)
    )
    assert "badge-error" in error_badge.attrs['class']
    assert error_badge.children[0].tag == "svg"
    assert error_badge.children[1] == "Error"
    
    # Return all elements in a Div
    return Div(
        info_badge,
        success_badge,
        warning_badge,
        error_badge
    )

# Run the tests
test_badge_icon_fasthtml_examples()

<div>
  <div class="badge badge-info">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1em]"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle r="10" cx="12" cy="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"></circle><path d="m12,17v-5.5c0-.276-.224-.5-.5-.5h-1.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"></path><circle r="1.25" cx="12" cy="7.25" fill="currentColor" stroke-width="2"></circle></g></svg>Info  </div>
  <div class="badge badge-success">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1em]"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle r="10" cx="12" cy="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"></circle><polyline points="7 13 10 16 17 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"></polyline></g></svg>Success  </div>
  <div class="badge badge-warning">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 18" class="size-[1em]"><g fill="currentColor"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><line x1="9" y1="6.5" x2="9" y2="10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" stroke="none" data-stroke="none"></path></g></svg>Warning  </div>
  <div class="badge badge-error">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="size-[1em]"><g fill="currentColor"><rect transform="translate(-4.971 12) rotate(-45)" width="20.056" height="2" x="1.972" y="11" fill="currentColor" stroke-width="0"></rect><path d="m12,23c-6.065,0-11-4.935-11-11S5.935,1,12,1s11,4.935,11,11-4.935,11-11,11Zm0-20C7.038,3,3,7.037,3,12s4.038,9,9,9,9-4.037,9-9S16.962,3,12,3Z" fill="currentColor" stroke-width="0"></path></g></svg>Error  </div>
</div>

test_func = test_badge_icon_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_badge_in_text_fasthtml_examples

 test_badge_in_text_fasthtml_examples ()

Test badge in text from daisyUI v5 documentation.

def test_badge_in_text_fasthtml_examples():
    """Test badge in text from daisyUI v5 documentation."""
    from fasthtml.common import H1, H2, H3, H4, H5, P, Span, Div
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    
    # Badge in a text
    h1 = H1(
        "Heading 1 ",
        Span("Badge", cls=combine_classes(badge, badge_sizes.xl)),
        cls=combine_classes(font_size.xl, font_weight.semibold)
    )
    assert h1.tag == "h1"
    assert "text-xl" in h1.attrs['class']
    assert "font-semibold" in h1.attrs['class']
    assert h1.children[0] == "Heading 1 "
    assert h1.children[1].tag == "span"
    assert "badge" in h1.children[1].attrs['class']
    assert "badge-xl" in h1.children[1].attrs['class']
    
    h2 = H2(
        "Heading 2 ",
        Span("Badge", cls=combine_classes(badge, badge_sizes.lg)),
        cls=combine_classes(font_size.lg, font_weight.semibold)
    )
    assert h2.tag == "h2"
    assert "text-lg" in h2.attrs['class']
    assert "badge-lg" in h2.children[1].attrs['class']
    
    h3 = H3(
        "Heading 3 ",
        Span("Badge", cls=combine_classes(badge, badge_sizes.md)),
        cls=combine_classes(font_size.base, font_weight.semibold)
    )
    assert h3.tag == "h3"
    assert "text-base" in h3.attrs['class']
    assert "badge-md" in h3.children[1].attrs['class']
    
    h4 = H4(
        "Heading 4 ",
        Span("Badge", cls=combine_classes(badge, badge_sizes.sm)),
        cls=combine_classes(font_size.sm, font_weight.semibold)
    )
    assert h4.tag == "h4"
    assert "text-sm" in h4.attrs['class']
    assert "badge-sm" in h4.children[1].attrs['class']
    
    h5 = H5(
        "Heading 5 ",
        Span("Badge", cls=combine_classes(badge, badge_sizes.xs)),
        cls=combine_classes(font_size.xs, font_weight.semibold)
    )
    assert h5.tag == "h5"
    assert "text-xs" in h5.attrs['class']
    assert "badge-xs" in h5.children[1].attrs['class']
    
    p = P(
        "Paragraph ",
        Span("Badge", cls=combine_classes(badge, badge_sizes.xs)),
        cls=str(font_size.xs)
    )
    assert p.tag == "p"
    assert p.attrs['class'] == "text-xs"
    assert "badge-xs" in p.children[1].attrs['class']
    
    # Return all elements in a Div
    return Div(
        h1,
        h2,
        h3,
        h4,
        h5,
        p
    )

# Run the tests
test_badge_in_text_fasthtml_examples()

<div>
  <h1 class="text-xl font-semibold">
Heading 1 <span class="badge badge-xl">Badge</span>  </h1>
  <h2 class="text-lg font-semibold">
Heading 2 <span class="badge badge-lg">Badge</span>  </h2>
  <h3 class="text-base font-semibold">
Heading 3 <span class="badge badge-md">Badge</span>  </h3>
  <h4 class="text-sm font-semibold">
Heading 4 <span class="badge badge-sm">Badge</span>  </h4>
  <h5 class="text-xs font-semibold">
Heading 5 <span class="badge badge-xs">Badge</span>  </h5>
  <p class="text-xs">
Paragraph <span class="badge badge-xs">Badge</span>  </p>
</div>

test_func = test_badge_in_text_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_badge_in_button_fasthtml_examples

 test_badge_in_button_fasthtml_examples ()

Test badge in button from daisyUI v5 documentation.

def test_badge_in_button_fasthtml_examples():
    """Test badge in button from daisyUI v5 documentation."""
    from fasthtml.common import Button, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Badge in a button
    button1 = Button(
        "Inbox ",
        Div("+99", cls=combine_classes(badge, badge_sizes.sm)),
        cls=str(btn)
    )
    assert button1.tag == "button"
    assert button1.attrs['class'] == "btn"
    assert button1.children[0] == "Inbox "
    assert button1.children[1].tag == "div"
    assert "badge" in button1.children[1].attrs['class']
    assert "badge-sm" in button1.children[1].attrs['class']
    assert button1.children[1].children[0] == "+99"
    
    button2 = Button(
        "Inbox ",
        Div("+99", cls=combine_classes(badge, badge_sizes.sm, badge_colors.secondary)),
        cls=str(btn)
    )
    assert button2.tag == "button"
    assert button2.attrs['class'] == "btn"
    assert "badge" in button2.children[1].attrs['class']
    assert "badge-sm" in button2.children[1].attrs['class']
    assert "badge-secondary" in button2.children[1].attrs['class']
    assert button2.children[1].children[0] == "+99"
    
    # Return all elements in a Div
    return Div(
        button1,
        button2
    )

# Run the tests
test_badge_in_button_fasthtml_examples()

<div>
<button class="btn">Inbox     <div class="badge badge-sm">+99</div>
</button><button class="btn">Inbox     <div class="badge badge-sm badge-secondary">+99</div>
</button></div>

test_func = test_badge_in_button_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()