zakodium-oss / react-science

React components and tools to build scientific applications.
https://react-science.pages.dev
MIT License
3 stars 6 forks source link

Add "count" (badge) to toolbar item #649

Closed stropitek closed 6 months ago

stropitek commented 6 months ago

It adds a small colored "pill" on the corner of the button with the count displayed.

We expect an integer to be passed and I think you can adapt the font size based on if there is 1, 2, or more digits in the number.

Example in NMRium: CleanShot 2024-02-09 at 15 42 54

API suggestion:

// text color is always white
<Toolbar.Item count={3} countBackgroundColor="red" />
wadjih-bencheikh18 commented 6 months ago

I like this style, WDYT?

image And on hover image

I used Tag component https://blueprintjs.com/docs/#core/components/tag

stropitek commented 6 months ago

SGTM, see PR comments