Possibility of having a ExtraSmall
variant for icon buttons
#295
Labels
enhancement
New feature or request
ExtraSmall
variant for icon buttons
#295
The smallest variant for a button is
ButtonSize::Small
, however this icon can be a little big for some uses cases, despite it being the smallest variant.The icon size when using
ButtonSize::Small
is20px
, but it can look out of place due to it being a little big. Many button icons, including the ones seen in Github toolbar and grafana dashboard are 16px or 18px.Example of Github button icons (16px icon size):
![Screenshot 2024-11-09 at 1 04 56 am](https://private-user-images.githubusercontent.com/16362377/384459635-0fb74bd9-7bf8-49c2-ab39-311420a1ac4f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4NTY1NTgsIm5iZiI6MTczOTg1NjI1OCwicGF0aCI6Ii8xNjM2MjM3Ny8zODQ0NTk2MzUtMGZiNzRiZDktN2JmOC00OWMyLWFiMzktMzExNDIwYTFhYzRmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDA1MjQxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ4NDRhYjQ1MzcyNWEyNThlMmUxMWUwMzRjMjU5MTYyMDkxNmEyZTQ3YmFkMzY0OTM4ODY1OGFiMzg3ZTk3MzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.zBXyB60wciwS45_Xuf9ARRw7BRhJ932fqLRgJsc0Rq8)
Example of Grafana button icons (18px icon size):
![Screenshot 2024-11-09 at 1 05 21 am](https://private-user-images.githubusercontent.com/16362377/384459734-b4510102-d84b-44ff-9c57-adb70ebbf2a5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4NTY1NTgsIm5iZiI6MTczOTg1NjI1OCwicGF0aCI6Ii8xNjM2MjM3Ny8zODQ0NTk3MzQtYjQ1MTAxMDItZDg0Yi00NGZmLTljNTctYWRiNzBlYmJmMmE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDA1MjQxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU2MWM5ZWE5NTQ0MDU2Njc2ZmJjMzllYjcwZmQyZGQ2ODkzOTZiNzllY2ZiMzUxNjFkNWI2MmI2YTMzNmY3ZjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.bsX_vOSzHH0yfHycCPF843gp_oZoyo3HjNV8SbLc_7w)
Example of Thaw UI small button icon size (20px icon size) used in a card header which looks a little oversized compared to the text:
![Screenshot 2024-11-09 at 1 06 32 am](https://private-user-images.githubusercontent.com/16362377/384460181-d1eb2717-b2f6-4b04-a9b0-043971609244.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4NTY1NTgsIm5iZiI6MTczOTg1NjI1OCwicGF0aCI6Ii8xNjM2MjM3Ny8zODQ0NjAxODEtZDFlYjI3MTctYjJmNi00YjA0LWE5YjAtMDQzOTcxNjA5MjQ0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDA1MjQxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYxNjgxMWRiNjJlZDA2ZmJkNWY2MGFjYjAyMTdkYzgxNzc4ZjYzYzdmZDViM2QzYzA1M2VjZGVmYWVlNGQ3NWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ExjBm8hMxkiOc4I3T_JVINytBo5ej6cnurIPIDQa2dQ)
For additional context, here's the button sizes I observe in the UI libraries mentioned as resources in Thaw's README:
The text was updated successfully, but these errors were encountered: