themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.89k stars 422 forks source link

Allow sizing of Pagination Buttons #214

Closed julianYaman closed 1 year ago

julianYaman commented 2 years ago

Is your feature request related to a problem? Please describe. I would like to have a Button group of small buttons in the same row as the Pagination component. But that's not really the issue. I just would like them to have the same size (small in this case).

Describe the solution you'd like Add an attribute to allow for sizing of the Pagination component buttons

Describe alternatives you've considered There aren't really any alternatives. Maybe to make the buttons larger again, which I don't really prefer.

Additional context

Bildschirmfoto 2022-06-09 um 01 39 48
rluders commented 2 years ago

It is already possible, if I'm not wrong. The buttons doesn't have defined sizes by default, they will fit to the parent size. It means that, if you do something like:

<Button.Group>
  <div className="w-10">
    <Button color="gray">Profile</Button>
  </div>
  <div className="w-10">
    <Button color="gray">Settings</Button>
  </div>
  <div className="w-10">
    <Button color="gray">Messages</Button>
  </div>
</Button.Group>

It should limit the size of the buttons. Could you please check if it works for you?

rluders commented 2 years ago

@julianYaman does it help?

julianYaman commented 2 years ago

Hey @rluders sorry, missed replying to you. Had my final exams recently. I'm going to try it with your solution, thanks 👍

tulup-conner commented 2 years ago

@rluders That solution doesn't work because ButtonGroup currently assumes the immediate children are Buttons. We might need to add a ButtonGroupContext and switch off of prop drilling to allow that behavior.

tulup-conner commented 2 years ago

See related #318

rluders commented 1 year ago

This can be done by using the theme system.