Conversation
In commit c2ff3ed we added a "missing" margin to the purple style button. We did so for consistencys sake, but the fact that the me-2 class was missing from one button seems to indicate that the margin is not an innate part of the button, and the other buttons solely have the margin classes because they need to look pretty in the documentation. The purple button example at https://flowbite.com/docs/components/buttons/#default-button does not have an end margin, whereas the other buttons do, probably because it is the last button of the group - which means it is entirely coincidental and specific to that example. Generally speaking, margins shouldn't be a part of each component. Leave it up to the consumer to add the whitespace around your components that you need them to.
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR removes intrinsic margin classes (me-2 and mb-2) from all button component styles to improve component composability. The change follows the principle that components should not impose their own spacing, allowing consumers to control layout and spacing as needed.
- Removes
me-2andmb-2margin classes from all button and pill button style definitions - Updates demo files to use Tailwind utility classes (
space-x-2,space-x-4) for proper spacing in examples - Maintains visual consistency in documentation examples while making components more flexible
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
app/components/flowbite/button.rb |
Removes margin classes from all button style definitions |
app/components/flowbite/button/pill.rb |
Removes margin classes from all pill button style definitions |
demo/test/components/previews/button_preview.rb |
Adds space-x-2 to preview display classes for proper spacing |
demo/app/views/pages/index.html.erb |
Adds sm:space-x-4 for horizontal spacing between buttons |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
olepalm
approved these changes
Aug 21, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
In commit c2ff3ed we added a "missing" margin to the purple style button. We did so for consistencys sake, but the fact that the
me-2class was missing from one button seems to indicate that the margin is not an innate part of the button, and the other buttons solely have the margin classes because they need to look pretty in the documentation.The purple button example at https://flowbite.com/docs/components/buttons/#default-button does not have an end margin, whereas the other buttons do, probably because it is the last button of the group - which means it is entirely coincidental and specific to that example.
Generally speaking, margins shouldn't be a part of each component. Leave it up to the consumer to add the whitespace around your components that you need them to.