status

Status is a really small icon to visually show the current status of an element, like online, offline, error, etc.

Base Status

The base status component:

status = SingleValueFactory("status", "Status icon component") # Status icon

Status Colors

Status color variants using daisyUI semantic colors:

status_colors = enums_to_simple_factory(status, [SemanticColorBrand, SemanticColorStatus], "Status color variants using daisyUI semantic colors") # Status color variants

Status Sizes

Status size variants:

status_sizes = enums_to_simple_factory(status, [DaisyUINamedSize], "Status size variants from extra small to extra large") # Status size variants

Status Test Examples

---

source

test_status_basic_examples

 test_status_basic_examples ()

Test basic status utilities.

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

# Run the tests
test_status_basic_examples()

---

source

test_status_colors_examples

 test_status_colors_examples ()

Test status color variants.

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

# Run the tests
test_status_colors_examples()

---

source

test_status_sizes_examples

 test_status_sizes_examples ()

Test status size variants.

def test_status_sizes_examples():
    """Test status size variants."""
    assert str(status_sizes.xs) == "status-xs"
    assert str(status_sizes.sm) == "status-sm"
    assert str(status_sizes.md) == "status-md"
    assert str(status_sizes.lg) == "status-lg"
    assert str(status_sizes.xl) == "status-xl"
    
    # With responsive modifiers
    assert str(status_sizes.xs.sm) == "sm:status-xs"
    assert str(status_sizes.lg.md) == "md:status-lg"

# Run the tests
test_status_sizes_examples()

---

source

test_status_basic_fasthtml_examples

 test_status_basic_fasthtml_examples ()

Test basic status from daisyUI v5 documentation.

def test_status_basic_fasthtml_examples():
    """Test basic status from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Basic status
    basic_status = Span(cls=str(status))
    assert basic_status.tag == "span"
    assert basic_status.attrs['class'] == "status"
    assert basic_status.children == ()  # Empty
    
    # Return elements in a Div
    return Div(basic_status)

# Run the tests
test_status_basic_fasthtml_examples()

<div>
<span class="status"></span></div>

test_func = test_status_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_status_sizes_fasthtml_examples

 test_status_sizes_fasthtml_examples ()

Test status sizes from daisyUI v5 documentation.

def test_status_sizes_fasthtml_examples():
    """Test status sizes from daisyUI v5 documentation."""
    from fasthtml.common import Div
    
    # Status sizes
    xs_status = Div(aria_label="status", cls=combine_classes(status, status_sizes.xs))
    assert xs_status.tag == "div"
    assert xs_status.attrs['aria-label'] == "status"
    assert "status" in xs_status.attrs['class']
    assert "status-xs" in xs_status.attrs['class']
    assert xs_status.children == ()
    
    sm_status = Div(aria_label="status", cls=combine_classes(status, status_sizes.sm))
    assert sm_status.tag == "div"
    assert sm_status.attrs['aria-label'] == "status"
    assert "status" in sm_status.attrs['class']
    assert "status-sm" in sm_status.attrs['class']
    assert sm_status.children == ()
    
    md_status = Div(aria_label="status", cls=combine_classes(status, status_sizes.md))
    assert md_status.tag == "div"
    assert md_status.attrs['aria-label'] == "status"
    assert "status" in md_status.attrs['class']
    assert "status-md" in md_status.attrs['class']
    assert md_status.children == ()
    
    lg_status = Div(aria_label="status", cls=combine_classes(status, status_sizes.lg))
    assert lg_status.tag == "div"
    assert lg_status.attrs['aria-label'] == "status"
    assert "status" in lg_status.attrs['class']
    assert "status-lg" in lg_status.attrs['class']
    assert lg_status.children == ()
    
    xl_status = Div(aria_label="status", cls=combine_classes(status, status_sizes.xl))
    assert xl_status.tag == "div"
    assert xl_status.attrs['aria-label'] == "status"
    assert "status" in xl_status.attrs['class']
    assert "status-xl" in xl_status.attrs['class']
    assert xl_status.children == ()
    
    # Return all elements in a Div
    return Div(xs_status, sm_status, md_status, lg_status, xl_status)

# Run the tests
test_status_sizes_fasthtml_examples()

<div>
  <div aria-label="status" class="status status-xs"></div>
  <div aria-label="status" class="status status-sm"></div>
  <div aria-label="status" class="status status-md"></div>
  <div aria-label="status" class="status status-lg"></div>
  <div aria-label="status" class="status status-xl"></div>
</div>

test_func = test_status_sizes_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_status_colors_fasthtml_examples

 test_status_colors_fasthtml_examples ()

Test status with colors from daisyUI v5 documentation.

def test_status_colors_fasthtml_examples():
    """Test status with colors from daisyUI v5 documentation."""
    from fasthtml.common import Div
    
    # Status with colors
    primary_status = Div(aria_label="status", cls=combine_classes(status, status_colors.primary))
    assert primary_status.tag == "div"
    assert primary_status.attrs['aria-label'] == "status"
    assert "status" in primary_status.attrs['class']
    assert "status-primary" in primary_status.attrs['class']
    assert primary_status.children == ()
    
    secondary_status = Div(aria_label="status", cls=combine_classes(status, status_colors.secondary))
    assert secondary_status.tag == "div"
    assert secondary_status.attrs['aria-label'] == "status"
    assert "status" in secondary_status.attrs['class']
    assert "status-secondary" in secondary_status.attrs['class']
    assert secondary_status.children == ()
    
    accent_status = Div(aria_label="status", cls=combine_classes(status, status_colors.accent))
    assert accent_status.tag == "div"
    assert accent_status.attrs['aria-label'] == "status"
    assert "status" in accent_status.attrs['class']
    assert "status-accent" in accent_status.attrs['class']
    assert accent_status.children == ()
    
    neutral_status = Div(aria_label="status", cls=combine_classes(status, status_colors.neutral))
    assert neutral_status.tag == "div"
    assert neutral_status.attrs['aria-label'] == "status"
    assert "status" in neutral_status.attrs['class']
    assert "status-neutral" in neutral_status.attrs['class']
    assert neutral_status.children == ()
    
    info_status = Div(aria_label="info", cls=combine_classes(status, status_colors.info))
    assert info_status.tag == "div"
    assert info_status.attrs['aria-label'] == "info"
    assert "status" in info_status.attrs['class']
    assert "status-info" in info_status.attrs['class']
    assert info_status.children == ()
    
    success_status = Div(aria_label="success", cls=combine_classes(status, status_colors.success))
    assert success_status.tag == "div"
    assert success_status.attrs['aria-label'] == "success"
    assert "status" in success_status.attrs['class']
    assert "status-success" in success_status.attrs['class']
    assert success_status.children == ()
    
    warning_status = Div(aria_label="warning", cls=combine_classes(status, status_colors.warning))
    assert warning_status.tag == "div"
    assert warning_status.attrs['aria-label'] == "warning"
    assert "status" in warning_status.attrs['class']
    assert "status-warning" in warning_status.attrs['class']
    assert warning_status.children == ()
    
    error_status = Div(aria_label="error", cls=combine_classes(status, status_colors.error))
    assert error_status.tag == "div"
    assert error_status.attrs['aria-label'] == "error"
    assert "status" in error_status.attrs['class']
    assert "status-error" in error_status.attrs['class']
    assert error_status.children == ()
    
    # Return all elements in a Div
    return Div(
        primary_status, secondary_status, accent_status, neutral_status,
        info_status, success_status, warning_status, error_status
    )

# Run the tests
test_status_colors_fasthtml_examples()

<div>
  <div aria-label="status" class="status status-primary"></div>
  <div aria-label="status" class="status status-secondary"></div>
  <div aria-label="status" class="status status-accent"></div>
  <div aria-label="status" class="status status-neutral"></div>
  <div aria-label="info" class="status status-info"></div>
  <div aria-label="success" class="status status-success"></div>
  <div aria-label="warning" class="status status-warning"></div>
  <div aria-label="error" class="status status-error"></div>
</div>

test_func = test_status_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_status_animation_fasthtml_examples

 test_status_animation_fasthtml_examples ()

Test status with ping and bounce animations from daisyUI v5 documentation.

def test_status_animation_fasthtml_examples():
    """Test status with ping and bounce animations from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import grid_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.transitions_and_animation import animate
    
    # Status with ping animation
    ping_container = Div(
        Div(cls=combine_classes(status, status_colors.error, animate.ping)),
        Div(cls=combine_classes(status, status_colors.error)),
        " Server is down",
        cls=combine_classes(grid_display.inline, "*:[grid-area:1/1]")
    )
    assert ping_container.tag == "div"
    assert "inline-grid" in ping_container.attrs['class']
    assert "*:[grid-area:1/1]" in ping_container.attrs['class']
    assert len(ping_container.children) == 3
    
    # First child - status with ping
    ping_status = ping_container.children[0]
    assert ping_status.tag == "div"
    assert "status" in ping_status.attrs['class']
    assert "status-error" in ping_status.attrs['class']
    assert "animate-ping" in ping_status.attrs['class']
    assert ping_status.children == ()
    
    # Second child - static status
    static_status = ping_container.children[1]
    assert static_status.tag == "div"
    assert "status" in static_status.attrs['class']
    assert "status-error" in static_status.attrs['class']
    assert "animate-ping" not in static_status.attrs['class']
    assert static_status.children == ()
    
    # Third child - text
    assert ping_container.children[2] == " Server is down"
    
    # Status with bounce animation
    bounce_status = Div(
        Div(cls=combine_classes(status, status_colors.info, animate.bounce)),
        " Unread messages"
    )
    assert bounce_status.tag == "div"
    assert len(bounce_status.children) == 2
    
    # First child - status with bounce
    bounce_indicator = bounce_status.children[0]
    assert bounce_indicator.tag == "div"
    assert "status" in bounce_indicator.attrs['class']
    assert "status-info" in bounce_indicator.attrs['class']
    assert "animate-bounce" in bounce_indicator.attrs['class']
    assert bounce_indicator.children == ()
    
    # Second child - text
    assert bounce_status.children[1] == " Unread messages"
    
    # Return all elements in a Div
    return Div(ping_container, bounce_status)

# Run the tests
test_status_animation_fasthtml_examples()

<div>
  <div class="inline-grid *:[grid-area:1/1]">
    <div class="status status-error animate-ping"></div>
    <div class="status status-error"></div>
 Server is down  </div>
  <div>
    <div class="status status-info animate-bounce"></div>
 Unread messages  </div>
</div>

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