reflex-dev/reflex · error · ValueError

f"Invalid size: {size}. Available sizes: {available_sizes}"

Error message

f"Invalid size: {size}. Available sizes: {available_sizes}"

What it means

Button size must be one of the registered sizes (e.g. 1-4 in radix-style or sm/md/lg mappings). Any other string fails validation at create time.

Source

Thrown at packages/reflex-components-internal/src/reflex_components_internal/components/base/button.py:130

        return super().create(*children_list, **props)

    @staticmethod
    def validate_variant(variant: LiteralButtonVariant):
        """Validate the button variant."""
        if variant not in BUTTON_VARIANTS["variant"]:
            available_variants = ", ".join(BUTTON_VARIANTS["variant"].keys())
            message = (
                f"Invalid variant: {variant}. Available variants: {available_variants}"
            )
            raise ValueError(message)

    @staticmethod
    def validate_size(size: LiteralButtonSize):
        """Validate the button size."""
        if size not in BUTTON_VARIANTS["size"]:
            available_sizes = ", ".join(BUTTON_VARIANTS["size"].keys())
            message = f"Invalid size: {size}. Available sizes: {available_sizes}"
            raise ValueError(message)

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "size",
            "variant",
            "loading",
        ]


class ButtonNamespace(ComponentNamespace):
    """Namespace for Button components."""

    create = staticmethod(Button.create)
    class_names = ClassNames
    __call__ = staticmethod(Button.create)

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Use a listed size from the error message (map md→'2', lg→'3', sm→'1' as appropriate)
2. Validate/whitelist config-driven sizes before passing them
3. Use the Literal size type from the package for static checking

Example fix

# before
rx.button("Hi", size="md")
# after
rx.button("Hi", size="2")

from reflex_components_internal.components.base.button import BUTTON_VARIANTS
if size not in BUTTON_VARIANTS['size']:
    size = '2'  # default fallback

def is_valid_button_size(s: str) -> TypeGuard[str]:
    from reflex_components_internal.components.base.button import BUTTON_VARIANTS
    return s in BUTTON_VARIANTS['size']

When it happens

Trigger: rx.button(..., size="medium") or size="xl" — not in BUTTON_VARIANTS['size']; commonly old Chakra sizes (sm/md/lg/xl).

Common situations: Porting Chakra-based Reflex apps where sizes were 'sm'/'md'/'lg'; typos; sizes coming from CMS/config data.

Understand the failure class

Background: Invalid enum value errors: "Unknown type", "Invalid scope", "must be one of" — when a string is not on the library's allowed list — this error's family across 23 libraries.

Related errors

• f"Invalid variant: {variant}. Available variants: {available
• f"Invalid size: {size}. Available sizes: {available_sizes}"
• f"Invalid size: {size}. Available sizes: {available_sizes}"
• ChildrenTypeError(component=cls.__name__, child=child)
• Do not override _add_style directly. Use add_style instead.

AI-assisted analysis of reflex-dev/reflex@45b8ed5ab7 (2026-08-28). Data as JSON: /api/errors/751ff85f17a9a112. Report an issue: GitHub.