ButtonGroup

Renders a horizontally wrapped group of buttons from a buttons configuration array. Each button can carry its own label, icons, style, type, size, and an extraData payload passed back to its onClick handler. An optional typewriter animation can reveal button titles sequentially, firing a callback when all animations complete.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | buttons | ButtonType[] | Yes | — | Array of button configuration objects (see below). | | containerStyle | React.CSSProperties | No | — | Inline styles for the wrapping container. | | buttonStyle | React.CSSProperties | No | — | Inline styles applied to every button (overridable per-button via button.style). | | enableAnimation | boolean | No | false | Enables typewriter animation on all button titles. | | animationSpeed | number | No | 20 | Milliseconds per character for the animation. | | onAnimationComplete | () => void | No | — | Callback fired when all button title animations have finished. |

ButtonType shape

| Field | Type | Required | Default | Description | |-------|------|----------|---------|-------------| | title | string | Yes | — | Button label text. | | onClick | (extraData: any) => void | No | — | Click handler, receives the button's extraData. | | extraData | any | No | — | Arbitrary data forwarded to onClick. | | type | 'outline' \| 'clear' \| 'solid' | No | — | Button visual style. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | — | Button size. | | color | string | No | — | Button color. | | startIcon | string | No | — | Icon name displayed before the title. | | startIconSize | number | No | — | Size of the start icon. | | startIconColor | string | No | — | Color of the start icon. | | startIconStyle | React.CSSProperties | No | — | Inline styles for the start icon. | | endIcon | string | No | — | Icon name displayed after the title. | | endIconSize | number | No | — | Size of the end icon. | | endIconColor | string | No | — | Color of the end icon. | | endIconStyle | React.CSSProperties | No | — | Inline styles for the end icon. | | hasShadow | boolean | No | — | Whether the button has a drop shadow. | | style | React.CSSProperties | No | — | Per-button inline styles (merged over buttonStyle). | | titleStyle | React.CSSProperties | No | — | Inline styles for the button title text. |

Usage

Basic

import ButtonGroup from '@/components/ButtonGroup';

const buttons = [
  { title: 'Edit', startIcon: 'edit', onClick: () => console.log('edit') },
  { title: 'Delete', startIcon: 'delete', onClick: () => console.log('delete') },
  { title: 'Export', startIcon: 'export', onClick: () => console.log('export') },
];

export default function Example() {
  return <ButtonGroup buttons={buttons} />;
}

With extraData and animation

import ButtonGroup from '@/components/ButtonGroup';

const buttons = [
  {
    title: 'View Invoice',
    startIcon: 'document',
    extraData: { invoiceId: 42 },
    onClick: (data) => console.log('Invoice ID:', data.invoiceId),
  },
  {
    title: 'Send Email',
    startIcon: 'email',
    extraData: { invoiceId: 42 },
    onClick: (data) => console.log('Send email for:', data.invoiceId),
  },
];

export default function Example() {
  return (
    <ButtonGroup
      buttons={buttons}
      enableAnimation
      animationSpeed={30}
      onAnimationComplete={() => console.log('All buttons revealed')}
    />
  );
}