@urban-ui/button-group v0.4.0

@urban-ui/button-group

control | button-group

Styling for a group of buttons

## Getting started

pnpm add -S @urban-ui/button-group

import {Button} from '@urban-ui/button'
import {ButtonGroup} from '@urban-ui/button-group'

export function MyComponent() {
  return (
    <ButtonGroup>
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  )
}

Details

ButtonGroup only applies some border styling to a collection of buttons. For general layout you do not need it, and it is trivial to create your own variant of ButtonGroup to apply different styling (or even functionality such as hover/active UI state that transitions between children).

ButtonGroup is designed to work best with children that are all urban-ui buttons. Typescript will not enforce this in case you want to extend Button to include your own button types.

ButtonGroup works by applying styling to children via '*', this has the potential to break in some use-cases but is generally fine. Part of the reason for this is to ensure that focus states work without clipping.

Due to how CSS flexbox works there can be cases where ButtonGroup does not have the width you might expect (leading to a broken UI), in most cases surrounding in a Box component will fix this.

API