ButtonGroup

The ButtonGroup component is used to group related buttons together. It's perfect for creating segmented controls, toggle groups, or any set of related actions.

Import

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

Usage

Basic ButtonGroup

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const buttons = [
    { label: 'Left', onPress: () => console.log('Left pressed') },
    { label: 'Middle', onPress: () => console.log('Middle pressed') },
    { label: 'Right', onPress: () => console.log('Right pressed') },
  ];

  return <ButtonGroup buttons={buttons} />;
}

With Selected State

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const buttons = [
    { label: 'Day', onPress: () => setSelectedIndex(0) },
    { label: 'Week', onPress: () => setSelectedIndex(1) },
    { label: 'Month', onPress: () => setSelectedIndex(2) },
  ];

  return (
    <ButtonGroup
      buttons={buttons}
      selectedIndex={selectedIndex}
    />
  );
}

Different Variants

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const buttons = [
    { label: 'One', onPress: () => {} },
    { label: 'Two', onPress: () => {} },
  ];

  return (
    <>
      <ButtonGroup
        buttons={buttons}
        variant="outlined"
      />

      <ButtonGroup
        buttons={buttons}
        variant="contained"
      />

      <ButtonGroup
        buttons={buttons}
        variant="text"
      />
    </>
  );
}

Different Sizes

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const buttons = [
    { label: 'Small', onPress: () => {} },
    { label: 'Small', onPress: () => {} },
  ];

  return (
    <>
      <ButtonGroup
        buttons={buttons}
        size="small"
      />

      <ButtonGroup
        buttons={buttons}
        size="medium"
      />

      <ButtonGroup
        buttons={buttons}
        size="large"
      />
    </>
  );
}

Vertical Direction

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const buttons = [
    { label: 'Top', onPress: () => {} },
    { label: 'Middle', onPress: () => {} },
    { label: 'Bottom', onPress: () => {} },
  ];

  return (
    <ButtonGroup
      buttons={buttons}
      direction="vertical"
    />
  );
}

With Disabled Buttons

import { ButtonGroup } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const buttons = [
    { label: 'Enabled', onPress: () => {} },
    { label: 'Disabled', onPress: () => {}, disabled: true },
    { label: 'Enabled', onPress: () => {} },
  ];

  return <ButtonGroup buttons={buttons} />;
}

Props

Main Props

Prop	Type	Default	Description
buttons	ButtonConfig[]	Required	Array of button configurations. Each button has label, onPress, and optional disabled props
selectedIndex	number	-	Index of the selected button
variant	"outlined" | "contained" | "text"	"outlined"	Visual variant of the button group
size	"small" | "medium" | "large"	"medium"	Size of the buttons
direction	"horizontal" | "vertical"	"horizontal"	Direction of the button group
disabled	boolean	false	Whether the entire button group is disabled

Where ButtonConfig is:

interface ButtonConfig {
  /** The text to display in the button */
  label: string;
  /** Function to call when button is pressed */
  onPress: () => void;
  /** Whether the button is disabled */
  disabled?: boolean;
}

Style Props

Prop	Type	Description
style	object	Additional styles for the container. Uses React Native ViewStyle

Accessibility Props

Prop	Type	Description
testID	string	Test ID for testing

Theme Customization

You can customize ButtonGroup via theme.buttonGroup tokens using ThemeProvider:

import { ThemeProvider, createTheme, defaultTheme } from '@lazy-panda-ui/lazy-panda-ui/theme';

const theme = createTheme(defaultTheme, {
  buttonGroup: {
    sizes: {
      medium: { height: 44 },
    },
    item: { borderRadius: 6 },
    overlap: { horizontal: -2, vertical: -2 },
    variants: {
      outlined: {
        background: '#fff',
        selectedBackground: '#eaf3ff',
        borderWidth: 1,
        borderColor: '#c7c7cc',
        selectedBorderColor: defaultTheme.colors.primary,
      },
      contained: {
        background: defaultTheme.colors.surfaceVariant,
        selectedBackground: defaultTheme.colors.primaryContainer,
      },
      text: {
        background: 'transparent',
        selectedBackground: defaultTheme.colors.primaryContainer,
      },
    },
  },
});

export function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* your app */}
    </ThemeProvider>
  );
}