Button Group

Button Group component for grouping multiple buttons with single or multiple selection modes.

Simple Selection

Pass a single value or undefined for simple selection mode.
Show code
Hide code
 
import type { ButtonGroupValue } from '@mylighthouse/prism-react';
import { ButtonGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
  { label: 'Option 4', value: 'option4' },
] as const;

export default function SimpleSelectionExample(): React.ReactElement {
  const [value, setValue] = useState<ButtonGroupValue>('option1');

  return (
    <div className="flex flex-col gap-300">
      <ButtonGroup onChange={setValue} value={value}>
        {options.map((option) => (
          <ButtonGroup.Button key={option.value} value={option.value}>
            {option.label}
          </ButtonGroup.Button>
        ))}
      </ButtonGroup>
    </div>
  );
}

Multiple Selection

Pass an array value for multiple selection mode.
Show code
Hide code
 
import type { ButtonGroupValue } from '@mylighthouse/prism-react';
import { ButtonGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
  { label: 'Option 4', value: 'option4' },
] as const;

export default function MultipleSelectionExample(): React.ReactElement {
  const [value, setValue] = useState<ButtonGroupValue>(['option1', 'option2']);

  return (
    <div className="flex flex-col gap-300">
      <ButtonGroup onChange={setValue} value={value}>
        {options.map((option) => (
          <ButtonGroup.Button key={option.value} value={option.value}>
            {option.label}
          </ButtonGroup.Button>
        ))}
      </ButtonGroup>
    </div>
  );
}

With Icons
Show code
Hide code
 
import type { ButtonGroupValue } from '@mylighthouse/prism-react';
import { ButtonGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

const options = [
  { label: 'Option 1', value: 'option1', icon: 'artificial-intelligence' },
  { label: 'Option 2', value: 'option2', icon: 'automation' },
  { label: 'Option 3', value: 'option3', icon: 'heart-filled' },
  { label: 'Option 4', value: 'option4', icon: 'star-filled' },
] as const;

export default function WithIconsExample(): React.ReactElement {
  const [value, setValue] = useState<ButtonGroupValue>('option2');

  return (
    <div className="flex flex-col gap-300">
      <ButtonGroup onChange={setValue} value={value}>
        {options.map((option) => (
          <ButtonGroup.Button
            iconBefore={option.icon}
            key={option.value}
            value={option.value}
          >
            {option.label}
          </ButtonGroup.Button>
        ))}
      </ButtonGroup>
    </div>
  );
}

Small Size
Show code
Hide code
 
import type { ButtonGroupValue } from '@mylighthouse/prism-react';
import { ButtonGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
  { label: 'Option 4', value: 'option4' },
] as const;

export default function SmallSizeExample(): React.ReactElement {
  const [value, setValue] = useState<ButtonGroupValue>('option3');

  return (
    <div className="flex flex-col gap-300">
      <ButtonGroup isSmall onChange={setValue} value={value}>
        {options.map((option) => (
          <ButtonGroup.Button key={option.value} value={option.value}>
            {option.label}
          </ButtonGroup.Button>
        ))}
      </ButtonGroup>
    </div>
  );
}

Disabled State
Show code
Hide code
 
import type { ButtonGroupValue } from '@mylighthouse/prism-react';
import { ButtonGroup } from '@mylighthouse/prism-react';
import { useState } from 'react';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
  { label: 'Option 4', value: 'option4' },
] as const;

export default function DisabledStateExample(): React.ReactElement {
  const [valueA, setValueA] = useState<ButtonGroupValue>('option1');
  const [valueB, setValueB] = useState<ButtonGroupValue>([
    'option1',
    'option2',
  ]);

  return (
    <div className="flex flex-col gap-300">
      <ButtonGroup isDisabled onChange={setValueA} value={valueA}>
        {options.map((option) => (
          <ButtonGroup.Button key={option.value} value={option.value}>
            {option.label}
          </ButtonGroup.Button>
        ))}
      </ButtonGroup>

      <ButtonGroup isDisabled onChange={setValueB} value={valueB}>
        {options.map((option) => (
          <ButtonGroup.Button key={option.value} value={option.value}>
            {option.label}
          </ButtonGroup.Button>
        ))}
      </ButtonGroup>
    </div>
  );
}

ButtonGroup

Name Default Type Description
onChange * -- (value: ButtonGroupValue) => void --
value * -- ButtonGroupValue --
isDisabled -- boolean --
isSmall -- boolean --

ButtonGroup.Button

Name Default Type Description
value * -- string --
iconBefore -- IconName --