alert

Alert informs users about important events.

Base Alert

alert = SingleValueFactory("alert", "Base alert container") # Base alert component

Alert Styles

alert_styles = enums_to_simple_factory(alert, [OutlineStyle, DashStyle, SoftStyle]) # Alert style variants

Alert Colors

alert_colors = enums_to_simple_factory(alert, [SemanticColorStatus], "Alert color variants using daisyUI semantic colors") # Alert color variants

Alert Directions

alert_directions = SimpleFactory(
    {
        "vertical": "alert-vertical",
        "horizontal": "alert-horizontal",
    },
    "alert directions (vertical, horizontal)"
) # alert directions

Alert Test Examples

---

source

test_alert_basic_examples

 test_alert_basic_examples ()

Test basic alert utilities.

def test_alert_basic_examples():
    """Test basic alert utilities."""
    # Basic alert
    assert str(alert) == "alert"
    
    # Button with modifiers
    assert str(alert.hover) == "hover:alert"
    assert str(alert.md) == "md:alert"
    assert str(alert.dark) == "dark:alert"

# Run the tests
test_alert_basic_examples()

---

source

test_alert_styles_examples

 test_alert_styles_examples ()

Test alert style variants.

def test_alert_styles_examples():
    """Test alert style variants."""
    assert str(alert_styles.outline) == "alert-outline"
    assert str(alert_styles.dash) == "alert-dash"
    assert str(alert_styles.soft) == "alert-soft"

# Run the tests
test_alert_styles_examples()

---

source

test_alert_colors_examples

 test_alert_colors_examples ()

Test alert color variants.

def test_alert_colors_examples():
    """Test alert color variants."""
    # All color variants
    assert str(alert_colors.info) == "alert-info"
    assert str(alert_colors.success) == "alert-success"
    assert str(alert_colors.warning) == "alert-warning"
    assert str(alert_colors.error) == "alert-error"
    
    # With modifiers
    assert str(alert_colors.info.hover) == "hover:alert-info"
    assert str(alert_colors.success.focus) == "focus:alert-success"

# Run the tests
test_alert_colors_examples()

---

source

test_alert_directions_examples

 test_alert_directions_examples ()

Test alert direction utilities.

def test_alert_directions_examples():
    """Test alert direction utilities."""
    assert str(alert_directions.vertical) == "alert-vertical"
    assert str(alert_directions.horizontal) == "alert-horizontal"

# Run the tests
test_alert_directions_examples()

---

source

test_alert_basic_fasthtml_examples

 test_alert_basic_fasthtml_examples ()

Test basic alert example from daisyUI v5 documentation.

def test_alert_basic_fasthtml_examples():
    """Test basic alert example from daisyUI v5 documentation."""
    from fasthtml.common import Div, Span
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import shrink
    from cjm_fasthtml_daisyui.utilities.semantic_colors import stroke_dui
    
    # Basic alert
    basic_alert = Div(
        Svg(
            Path(
                stroke_linecap="round",
                stroke_linejoin="round",
                stroke_width="2",
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ),
            xmlns="http://www.w3.org/2000/svg",
            fill="none",
            viewBox="0 0 24 24",
            cls=combine_classes(stroke_dui.info, h._6, w._6, shrink._0)
        ),
        Span("12 unread messages. Tap to see."),
        role="alert",
        cls=str(alert)
    )
    
    # Verify structure
    assert basic_alert.tag == "div"
    assert basic_alert.attrs['role'] == "alert"
    assert basic_alert.attrs['class'] == "alert"
    
    # Verify SVG icon
    svg_element = basic_alert.children[0]
    assert svg_element.tag == "svg"
    assert "stroke-info" in svg_element.attrs['class']
    assert "h-6" in svg_element.attrs['class']
    assert "w-6" in svg_element.attrs['class']
    assert "shrink-0" in svg_element.attrs['class']
    
    # Verify text span
    span_element = basic_alert.children[1]
    assert span_element.tag == "span"
    assert span_element.children[0] == "12 unread messages. Tap to see."
    
    return basic_alert

# Run the tests
test_alert_basic_fasthtml_examples()

<div role="alert" class="alert">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="stroke-info h-6 w-6 shrink-0"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>12 unread messages. Tap to see.</span></div>

test_func = test_alert_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_alert_colors_fasthtml_examples

 test_alert_colors_fasthtml_examples ()

Test alert color variations from daisyUI v5 documentation.

def test_alert_colors_fasthtml_examples():
    """Test alert color variations from daisyUI v5 documentation."""
    from fasthtml.common import Div, Span
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import shrink
    from cjm_fasthtml_tailwind.utilities.svg import stroke
    
    # Create reusable icons
    info_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(h._6, w._6, shrink._0, stroke.current)
    )
    
    success_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(h._6, w._6, shrink._0, stroke.current)
    )
    
    warning_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(h._6, w._6, shrink._0, stroke.current)
    )
    
    error_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(h._6, w._6, shrink._0, stroke.current)
    )
    
    # Info alert
    info_alert = Div(
        info_icon,
        Span("New software update available."),
        role="alert",
        cls=combine_classes(alert, alert_colors.info)
    )
    assert info_alert.attrs['role'] == "alert"
    assert "alert" in info_alert.attrs['class']
    assert "alert-info" in info_alert.attrs['class']
    assert info_alert.children[1].children[0] == "New software update available."
    
    # Success alert
    success_alert = Div(
        success_icon,
        Span("Your purchase has been confirmed!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.success)
    )
    assert "alert" in success_alert.attrs['class']
    assert "alert-success" in success_alert.attrs['class']
    assert success_alert.children[1].children[0] == "Your purchase has been confirmed!"
    
    # Warning alert
    warning_alert = Div(
        warning_icon,
        Span("Warning: Invalid email address!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.warning)
    )
    assert "alert" in warning_alert.attrs['class']
    assert "alert-warning" in warning_alert.attrs['class']
    assert warning_alert.children[1].children[0] == "Warning: Invalid email address!"
    
    # Error alert
    error_alert = Div(
        error_icon,
        Span("Error! Task failed successfully."),
        role="alert",
        cls=combine_classes(alert, alert_colors.error)
    )
    assert "alert" in error_alert.attrs['class']
    assert "alert-error" in error_alert.attrs['class']
    assert error_alert.children[1].children[0] == "Error! Task failed successfully."
    
    # Return all alerts in a Div
    return Div(
        info_alert,
        success_alert,
        warning_alert,
        error_alert
    )

# Run the tests
test_alert_colors_fasthtml_examples()

<div>
  <div role="alert" class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="h-6 w-6 shrink-0 stroke-current"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>New software update available.</span>  </div>
  <div role="alert" class="alert alert-success">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="h-6 w-6 shrink-0 stroke-current"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Your purchase has been confirmed!</span>  </div>
  <div role="alert" class="alert alert-warning">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="h-6 w-6 shrink-0 stroke-current"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Warning: Invalid email address!</span>  </div>
  <div role="alert" class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="h-6 w-6 shrink-0 stroke-current"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>Error! Task failed successfully.</span>  </div>
</div>

test_func = test_alert_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_alert_styles_fasthtml_examples

 test_alert_styles_fasthtml_examples ()

Test alert style variations (soft, outline, dash) from daisyUI v5 documentation.

def test_alert_styles_fasthtml_examples():
    """Test alert style variations (soft, outline, dash) from daisyUI v5 documentation."""
    from fasthtml.common import Div, Span
    
    # Alert soft style
    soft_info = Div(
        Span("12 unread messages. Tap to see."),
        role="alert",
        cls=combine_classes(alert, alert_colors.info, alert_styles.soft)
    )
    assert "alert" in soft_info.attrs['class']
    assert "alert-info" in soft_info.attrs['class']
    assert "alert-soft" in soft_info.attrs['class']
    
    soft_success = Div(
        Span("Your purchase has been confirmed!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.success, alert_styles.soft)
    )
    assert "alert-success" in soft_success.attrs['class']
    assert "alert-soft" in soft_success.attrs['class']
    
    soft_warning = Div(
        Span("Warning: Invalid email address!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.warning, alert_styles.soft)
    )
    assert "alert-warning" in soft_warning.attrs['class']
    assert "alert-soft" in soft_warning.attrs['class']
    
    soft_error = Div(
        Span("Error! Task failed successfully."),
        role="alert",
        cls=combine_classes(alert, alert_colors.error, alert_styles.soft)
    )
    assert "alert-error" in soft_error.attrs['class']
    assert "alert-soft" in soft_error.attrs['class']
    
    # Alert outline style
    outline_info = Div(
        Span("12 unread messages. Tap to see."),
        role="alert",
        cls=combine_classes(alert, alert_colors.info, alert_styles.outline)
    )
    assert "alert" in outline_info.attrs['class']
    assert "alert-info" in outline_info.attrs['class']
    assert "alert-outline" in outline_info.attrs['class']
    
    outline_success = Div(
        Span("Your purchase has been confirmed!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.success, alert_styles.outline)
    )
    assert "alert-success" in outline_success.attrs['class']
    assert "alert-outline" in outline_success.attrs['class']
    
    outline_warning = Div(
        Span("Warning: Invalid email address!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.warning, alert_styles.outline)
    )
    assert "alert-warning" in outline_warning.attrs['class']
    assert "alert-outline" in outline_warning.attrs['class']
    
    outline_error = Div(
        Span("Error! Task failed successfully."),
        role="alert",
        cls=combine_classes(alert, alert_colors.error, alert_styles.outline)
    )
    assert "alert-error" in outline_error.attrs['class']
    assert "alert-outline" in outline_error.attrs['class']
    
    # Alert dash style
    dash_info = Div(
        Span("12 unread messages. Tap to see."),
        role="alert",
        cls=combine_classes(alert, alert_colors.info, alert_styles.dash)
    )
    assert "alert" in dash_info.attrs['class']
    assert "alert-info" in dash_info.attrs['class']
    assert "alert-dash" in dash_info.attrs['class']
    
    dash_success = Div(
        Span("Your purchase has been confirmed!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.success, alert_styles.dash)
    )
    assert "alert-success" in dash_success.attrs['class']
    assert "alert-dash" in dash_success.attrs['class']
    
    dash_warning = Div(
        Span("Warning: Invalid email address!"),
        role="alert",
        cls=combine_classes(alert, alert_colors.warning, alert_styles.dash)
    )
    assert "alert-warning" in dash_warning.attrs['class']
    assert "alert-dash" in dash_warning.attrs['class']
    
    dash_error = Div(
        Span("Error! Task failed successfully."),
        role="alert",
        cls=combine_classes(alert, alert_colors.error, alert_styles.dash)
    )
    assert "alert-error" in dash_error.attrs['class']
    assert "alert-dash" in dash_error.attrs['class']
    
    # Return all style variations in a Div
    return Div(
        # Soft style alerts
        Div(soft_info, soft_success, soft_warning, soft_error),
        # Outline style alerts
        Div(outline_info, outline_success, outline_warning, outline_error),
        # Dash style alerts
        Div(dash_info, dash_success, dash_warning, dash_error)
    )

# Run the tests
test_alert_styles_fasthtml_examples()

<div>
  <div>
    <div role="alert" class="alert alert-info alert-soft">
<span>12 unread messages. Tap to see.</span>    </div>
    <div role="alert" class="alert alert-success alert-soft">
<span>Your purchase has been confirmed!</span>    </div>
    <div role="alert" class="alert alert-warning alert-soft">
<span>Warning: Invalid email address!</span>    </div>
    <div role="alert" class="alert alert-error alert-soft">
<span>Error! Task failed successfully.</span>    </div>
  </div>
  <div>
    <div role="alert" class="alert alert-info alert-outline">
<span>12 unread messages. Tap to see.</span>    </div>
    <div role="alert" class="alert alert-success alert-outline">
<span>Your purchase has been confirmed!</span>    </div>
    <div role="alert" class="alert alert-warning alert-outline">
<span>Warning: Invalid email address!</span>    </div>
    <div role="alert" class="alert alert-error alert-outline">
<span>Error! Task failed successfully.</span>    </div>
  </div>
  <div>
    <div role="alert" class="alert alert-info alert-dash">
<span>12 unread messages. Tap to see.</span>    </div>
    <div role="alert" class="alert alert-success alert-dash">
<span>Your purchase has been confirmed!</span>    </div>
    <div role="alert" class="alert alert-warning alert-dash">
<span>Warning: Invalid email address!</span>    </div>
    <div role="alert" class="alert alert-error alert-dash">
<span>Error! Task failed successfully.</span>    </div>
  </div>
</div>

test_func = test_alert_styles_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_alert_with_buttons_fasthtml_examples

 test_alert_with_buttons_fasthtml_examples ()

Test alert with buttons and responsive layout from daisyUI v5 documentation.

def test_alert_with_buttons_fasthtml_examples():
    """Test alert with buttons and responsive layout from daisyUI v5 documentation."""
    from fasthtml.common import Div, Span, Button
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import shrink
    from cjm_fasthtml_daisyui.utilities.semantic_colors import stroke_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_colors
    
    # Create reusable info icon
    info_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(stroke_dui.info, h._6, w._6, shrink._0)
    )
    
    # Alert with buttons + responsive (vertical on mobile, horizontal on sm+)
    responsive_alert = Div(
        info_icon,
        Span("we use cookies for no reason."),
        Div(
            Button("Deny", cls=combine_classes(btn, btn_sizes.sm)),
            Button("Accept", cls=combine_classes(btn, btn_sizes.sm, btn_colors.primary))
        ),
        role="alert",
        cls=combine_classes(alert, alert_directions.vertical, alert_directions.horizontal.sm)
    )
    
    # Verify structure
    assert responsive_alert.tag == "div"
    assert responsive_alert.attrs['role'] == "alert"
    assert "alert" in responsive_alert.attrs['class']
    assert "alert-vertical" in responsive_alert.attrs['class']
    assert "sm:alert-horizontal" in responsive_alert.attrs['class']
    
    # Verify icon
    assert responsive_alert.children[0].tag == "svg"
    assert "stroke-info" in responsive_alert.children[0].attrs['class']
    
    # Verify text
    assert responsive_alert.children[1].tag == "span"
    assert responsive_alert.children[1].children[0] == "we use cookies for no reason."
    
    # Verify button container
    button_container = responsive_alert.children[2]
    assert button_container.tag == "div"
    assert len(button_container.children) == 2
    
    # Verify deny button
    deny_button = button_container.children[0]
    assert deny_button.tag == "button"
    assert "btn" in deny_button.attrs['class']
    assert "btn-sm" in deny_button.attrs['class']
    assert deny_button.children[0] == "Deny"
    
    # Verify accept button
    accept_button = button_container.children[1]
    assert accept_button.tag == "button"
    assert "btn" in accept_button.attrs['class']
    assert "btn-sm" in accept_button.attrs['class']
    assert "btn-primary" in accept_button.attrs['class']
    assert accept_button.children[0] == "Accept"
    
    return responsive_alert

# Run the tests
test_alert_with_buttons_fasthtml_examples()

<div role="alert" class="alert alert-vertical sm:alert-horizontal">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="stroke-info h-6 w-6 shrink-0"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>we use cookies for no reason.</span>  <div>
<button class="btn btn-sm">Deny</button><button class="btn btn-sm btn-primary">Accept</button>  </div>
</div>

test_func = test_alert_with_buttons_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_alert_with_title_description_fasthtml_examples

 test_alert_with_title_description_fasthtml_examples ()

Test alert with title and description from daisyUI v5 documentation.

def test_alert_with_title_description_fasthtml_examples():
    """Test alert with title and description from daisyUI v5 documentation."""
    from fasthtml.common import Div, H3, Button
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import shrink
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import stroke_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes
    
    # Create reusable info icon
    info_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(stroke_dui.info, h._6, w._6, shrink._0)
    )
    
    # Alert with title and description
    title_desc_alert = Div(
        info_icon,
        Div(
            H3("New message!", cls=str(font_weight.bold)),
            Div("You have 1 unread message", cls=str(font_size.xs))
        ),
        Button("See", cls=combine_classes(btn, btn_sizes.sm)),
        role="alert",
        cls=combine_classes(alert, alert_directions.vertical, alert_directions.horizontal.sm)
    )
    
    # Verify structure
    assert title_desc_alert.tag == "div"
    assert title_desc_alert.attrs['role'] == "alert"
    assert "alert" in title_desc_alert.attrs['class']
    assert "alert-vertical" in title_desc_alert.attrs['class']
    assert "sm:alert-horizontal" in title_desc_alert.attrs['class']
    
    # Verify icon
    assert title_desc_alert.children[0].tag == "svg"
    assert "stroke-info" in title_desc_alert.children[0].attrs['class']
    
    # Verify content container
    content_container = title_desc_alert.children[1]
    assert content_container.tag == "div"
    assert len(content_container.children) == 2
    
    # Verify title
    title_element = content_container.children[0]
    assert title_element.tag == "h3"
    assert "font-bold" in title_element.attrs['class']
    assert title_element.children[0] == "New message!"
    
    # Verify description
    desc_element = content_container.children[1]
    assert desc_element.tag == "div"
    assert "text-xs" in desc_element.attrs['class']
    assert desc_element.children[0] == "You have 1 unread message"
    
    # Verify button
    see_button = title_desc_alert.children[2]
    assert see_button.tag == "button"
    assert "btn" in see_button.attrs['class']
    assert "btn-sm" in see_button.attrs['class']
    assert see_button.children[0] == "See"
    
    return title_desc_alert

# Run the tests
test_alert_with_title_description_fasthtml_examples()

<div role="alert" class="alert alert-vertical sm:alert-horizontal">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="stroke-info h-6 w-6 shrink-0"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>  <div>
    <h3 class="font-bold">New message!</h3>
    <div class="text-xs">You have 1 unread message</div>
  </div>
<button class="btn btn-sm">See</button></div>

test_func = test_alert_with_title_description_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()