Originally posted by **aweell** February 19, 2024
### Goal
The goal of the discussion is to find a configuration where the badge with children works in most use cases.
### Context
* Currently the avatar uses a custom implementation since the default positioning (top and right values) of the badge when it has a children are designed to work on square elements, not circular ones.
* The component already provides the top and right props so its position could be adjusted to what is desired in each case.
* In the current badge specs (apart from the fact that the examples were broken) we were not considering those cases in which the badge is placed on a circular element.
There could potentially be a case where someone would want to place that badge in an extended component that has the same characteristics as the current iconButton.
[Example ->](https://mistica-web.vercel.app/playroom/#?code=N4Igxg9gJgpiBcIA8AVGAPALgPgCIwDMBDAVwBtMACAZwgCMAnGSgS0gDsJKiALCBokgD0aLNgA67JACEI6SgAciUKC3YBzALzAALAA4AvhPaVKM5euYA3ImRIxN4kAFYnx06aQBJDgGUYmJhq6tQASjDq5EQMNCwAXg7AAMwATAaUQu5mQtIWMMbCsujGkqgYOPjE5FS0jMxENpjR3HwCwqI4pUWKyqoa2vpGkp4Ago3Rwx7U8YmpBpOm1AxgjiA8gQrU8EJCtCTLMAB0JOzUCmRE1DyHkAC2QgBsAAxP6M9PQgD8xGAwTguUOh5bTOeYmDIFHJyEpSDrYACiACsYLdzlwgVBLJQOJQbHYYNRKLAyNxxgx2uUCt0lCpggNDFlzJjrLZ7KtXCBKAwWOp1toALTOQ5JACMSXSmAgCgFQtF4qynh8EHY-kCwTCESiMWmCW0cwhk0KeUhRWwIAANCBMDwUQSEABtEAAWQgVhY1CaDBAAF1LQB3FhQa3UB1JZ7msUPPTegxAA)
### Impact
This proposal aims to avoid doing custom implementations of the badge when is wrapping a circular visible container.
### Discussion Questions
* One of the proposals is to assume all containers can be circular and position the badge accordingly
* Another option could be to create a prop that allows to configure the badge positioning out of the box for both types of containers.
### Additional considerations
_No response_
### Do you have a visual proposal?
_No response_
Tasks
Discussed in https://github.com/Telefonica/mistica-design/discussions/1656