ButtonGroup component lacks customization options for background and border colors

[e-fu]

Title: ButtonGroup component lacks customization options for background and border colors

Description: The ButtonGroup component in Petal Components 2.0 has hardcoded background and border color styles in the group_btn_base_class function. This makes it difficult to customize the appearance of the buttons to match different design requirements without resorting to CSS overrides or creating custom components.

Current behavior: The ButtonGroup component applies the following styles to all buttons:

• bg-white hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800
• border border-gray-200 dark:border-gray-800

These styles cannot be easily overridden or customized through the component's props.

Expected behavior: The ButtonGroup component should allow for easy customization of background and border colors, either through:

1. Additional props for specifying custom classes for background and border styles
2. A way to override or extend the base styles without affecting other properties

Suggested solution: Add new props to the ButtonGroup component, such as:

• button_bg_class: for customizing button background colors
• button_border_class: for customizing button border styles

These props would then be used in the group_btn_base_class function to override the default styles when provided.

Example usage:

<.button_group
aria_label="Custom styled buttons"
button_bg_class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800"
button_border_class="border-blue-300 dark:border-blue-600"
>
<:button>Custom Button 1</:button>
<:button>Custom Button 2</:button>
</.button_group>

This change would greatly improve the flexibility of the ButtonGroup component, allowing it to be used in a wider variety of design contexts without the need for CSS overrides or custom components.

Environment:

• Petal Components version: 2.0

Additional context: This issue was encountered while trying to style button groups to match the background of a custom post component in a social media-like application. The current implementation required using CSS overrides with !important flags, which is not ideal for maintainability and consistency.

[nhobes]

Thanks for this feedback!

This should be updated in: v2.1.2