freenowtech / freenowtech/wave
New ButtonGroup component
- Dominant language
- TypeScript
- Stars
- 67
- Forks
- 31
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 4
Description
We recently needed a group of buttons to be able to select different weekdays.

So I went ahead and created this using the Button and Box component and styling them to our needs.
Styling code:
```
const ButtonGroup = styled(Box)`
border-radius: 4px;
overflow: hidden;
border: ${props =>
props.error ? `1px solid ${Colors.NEGATIVE_ORANGE_900}` : `1px solid ${Colors.AUTHENTIC_BLUE_200}`};
`;
const ButtonGroupItem = styled(Button)`
background: ${props => (props.selected ? Colors.ACTION_BLUE_900 : Colors.WHITE)};
border-top: none;
border-bottom: none;
border-left: none;
border-right: ${props =>
props.selected ? `1px solid ${Colors.ACTION_BLUE_900}` : `1px solid ${Colors.AUTHENTIC_BLUE_200}`};
padding: 0 8px;
min-width: 0;
border-radius: 0;
:nth-child(1) {
border-left: ${props =>
props.selected ? `1px solid ${Colors.ACTION_BLUE_900}` : `1px solid ${Colors.AUTHENTIC_BLUE_200}`};
}
&:hover {
background: ${props => (props.selected ? Colors.ACTION_BLUE_1000 : Colors.AUTHENTIC_BLUE_50)};
}
`;
```
JSX code:
```
{days.map((day, index) => (
handleDayChange(day.value)}
>
{day.label}
))}
```
It feels a little bit hacky overriding a bunch of the styles, but it seemed like the best approach to have the elements look like all other buttons.
What do you think about this solution and do you see this as something worth adding to wave?
Contributor guide
Assessment
This issue has not been assessed yet.