How to avoid BadgedBox get clipped in combination with IconButton

Question

IconButton(onClick = onClick) {
        BadgedBox(
            badge = {
                    Badge {
                        Text("2")
                    }
            },
        ) {
            Icon(
                imageVector = Icons.Outlined.Notifications,
            )
        }
    }

This code leads to this:

Answer 1

Box {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Outlined.Notifications,
            contentDescription = "Notifications",
        )
    }
    Badge(
        modifier = Modifier
            .align(Alignment.TopEnd)
    ) {
        Text("2")
    }
}

• Box is used as a parent container that holds both the IconButton and the Badge. This allows you to overlay the Badge over the IconButton without clipping.
• Modifier.align(Alignment.TopEnd) positions the Badge at the top-right corner of the Box, above the IconButton.

This way, the badge is fully visible and no longer gets clipped.