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

<Badge> inside <Button> is inconsistent between themes. #3021

Open
bradenmacdonald opened this issue Mar 26, 2024 · 0 comments
Open

<Badge> inside <Button> is inconsistent between themes. #3021

bradenmacdonald opened this issue Mar 26, 2024 · 0 comments
Labels
bug Report of or fix for something that isn't working as intended byte-size good first issue A good task for a newcomer to start with

Comments

@bradenmacdonald
Copy link
Contributor

bradenmacdonald commented Mar 26, 2024

When a <Button size="sm"> contains a <Badge> element:

  1. Bug: with the edx.org theme, the button grows in height and is no longer consistent with other size="sm" buttons:
    Screenshot 2024-03-26 at 12 26 38 PM
    Compare to without a badge, where the buttons had the same height:
    Screenshot 2024-03-26 at 12 38 22 PM
  2. Bug?: with the Open edX theme, the badge preserves the button's height correctly but seems like it could use a bit more padding above and below the badge text ("+2" here).
    Screenshot 2024-03-26 at 12 30 03 PM
  3. Neither the <Badge> nor <Button> docs page have any examples of a badge inside a button, but I think this should be shown as a supported example. It is in Bootstrap docs and Flowbite docs for example.

Context, FWIW: building a button with a dropdown to select filter options, like this:

Screenshot 2024-03-26 at 12 25 53 PM

@bradenmacdonald bradenmacdonald added bug Report of or fix for something that isn't working as intended byte-size good first issue A good task for a newcomer to start with labels Mar 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Report of or fix for something that isn't working as intended byte-size good first issue A good task for a newcomer to start with
Projects
Status: Backlog
Status: Backlog
Development

No branches or pull requests

1 participant