Skip to content

README.md

Latest commit

 

History

History
38 lines (26 loc) · 1.39 KB

README.md

File metadata and controls

38 lines (26 loc) · 1.39 KB
Raw

ButtonGroup

Wrapper for buttons group

Features

  • Two Orientation Modes: Supports horizontal (default) and vertical layouts
  • Flexible Wrapping: Buttons wrap to the next line when there is not enough horizontal space
  • Composable: Accepts any number of child components

Usage

import {ButtonGroup} from '@/components/molecules/ButtonGroup';

// Horizontal orientation
<ButtonGroup><Button>Button 1</Button><Button>Button 1</Button></ButtonGroup>

// Vertical orientation
<ButtonGroup orientation="vertical"><Button>Button 1</Button><Button>Button 1</Button></ButtonGroup>

Props

Prop Type Required Default Description
children React.ReactNode[] ✓ - Buttons for render
orientation 'horizontal' | 'vertical' - 'horizontal' Orientation of buttons
className string - - Additional CSS class
qa string - - QA/test identifier

Styling

The component uses CSS variables for theming:

Variable Description
--g-spacing-1 Gap between buttons