Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stropitek opened this issue Feb 9, 2024 · 2 comments · Fixed by #654
Closed

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

stropitek opened this issue Feb 9, 2024 · 2 comments · Fixed by #654
Assignees

Comments

@stropitek
Copy link
Contributor

stropitek commented Feb 9, 2024

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
Copy link
Member

I like this style, WDYT?

image
And on hover
image

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

@wadjih-bencheikh18 wadjih-bencheikh18 linked a pull request Feb 10, 2024 that will close this issue
@lpatiny lpatiny changed the title Add "count" to toolbar item Add "count" (badge) to toolbar item Feb 10, 2024
@stropitek
Copy link
Contributor Author

SGTM, see PR comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants