Skip to content

Remove margins from button#30

Merged
koppen merged 1 commit intomainfrom
remove_button_margins
Aug 21, 2025
Merged

Remove margins from button#30
koppen merged 1 commit intomainfrom
remove_button_margins

Conversation

@koppen
Copy link
Copy Markdown
Member

@koppen koppen commented Aug 21, 2025

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.

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.
@koppen koppen requested a review from Copilot August 21, 2025 10:59
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-2 and mb-2 margin 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.

@koppen koppen requested review from RasmusDWN and olepalm August 21, 2025 11:02
@koppen koppen merged commit 78eab43 into main Aug 21, 2025
5 checks passed
@koppen koppen deleted the remove_button_margins branch August 21, 2025 13:31
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 this pull request may close these issues.

3 participants