Create extra small icon button for use inside when embedded inside other small sized components.

[DBD324]

Summary

Icon buttons currently have different size definitions from the rest of the system. The naming of this is slightly confusing and could be improved. By using an extra small icon button, and providing up to a large size, it allows icon buttons to be consistently aligned with other same-sized components and allows buttons to be embedded within other components by using a size step down.

💬 Description

For example, our default sizes use the following values: Default: 40px Small: 32px Large: 48px

Currently, icon buttons have the following sizes: Default: 32x32px Small: 24x24px Large: 40x40px

The suggestion is to change the icon button sizes to the following: Default: 40x40px Small: 32x32px Extra-Small: 24x24px Large: 48x48px

This would allow a user to layout a series of components including an icon button adjacent to one another and achieve consistent alignment.

For nested icon buttons in other sized components, the size below can be used. For example, a default sized text field (40px height) can contain a small sized icon button (32x32px) whilst maintaing padding around it.

💰 Use value

Makes sizing properties consistent across icon buttons and other components and provides a larger 48px icon button for large sized component layouts.

Additional info

Need to take care when making the change in Figma as this will require other components that use the buttons nested to be re-linked and re-published.