Button Components

/**
 * Button component for user interactions
 * @param variant - Button style variant
 * @param size - Button size
 * @param active - Active state
 * @param disabled - Disabled state
 */
function Button(props: ButtonProps): JSX.Element;

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Button style variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
  /** Button size */
  size?: "sm" | "lg";
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Link URL (when used as link) */
  href?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Button } from "react-bootstrap";

// Basic buttons with variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>
<Button variant="light">Light</Button>
<Button variant="dark">Dark</Button>
<Button variant="link">Link</Button>

// Outline buttons
<Button variant="outline-primary">Outline Primary</Button>
<Button variant="outline-secondary">Outline Secondary</Button>

// Button sizes
<Button size="lg" variant="primary">Large</Button>
<Button variant="primary">Regular</Button>
<Button size="sm" variant="primary">Small</Button>

// Button states
<Button variant="primary" active>Active</Button>
<Button variant="primary" disabled>Disabled</Button>

// Button as link
<Button variant="primary" href="#link">Link Button</Button>

// Button with click handler
<Button 
  variant="success"
  onClick={() => console.log('Button clicked!')}
>
  Click Me
</Button>

/**
 * ButtonGroup component for grouping buttons
 * @param size - Button group size
 * @param vertical - Vertical layout
 */
function ButtonGroup(props: ButtonGroupProps): JSX.Element;

interface ButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
  /** Button group size */
  size?: "sm" | "lg";
  /** Vertical layout */
  vertical?: boolean;
  /** ARIA role */
  role?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { ButtonGroup, Button } from "react-bootstrap";

// Basic button group
<ButtonGroup aria-label="Basic example">
  <Button variant="secondary">Left</Button>
  <Button variant="secondary">Middle</Button>
  <Button variant="secondary">Right</Button>
</ButtonGroup>

// Button group with different variants
<ButtonGroup>
  <Button variant="outline-primary">First</Button>
  <Button variant="outline-primary">Second</Button>
  <Button variant="outline-primary">Third</Button>
</ButtonGroup>

// Vertical button group
<ButtonGroup vertical>
  <Button variant="secondary">Button</Button>
  <Button variant="secondary">Button</Button>
  <Button variant="secondary">Button</Button>
</ButtonGroup>

// Large button group
<ButtonGroup size="lg">
  <Button variant="secondary">Large</Button>
  <Button variant="secondary">Button</Button>
</ButtonGroup>

/**
 * ButtonToolbar component for combining button groups
 */
function ButtonToolbar(props: ButtonToolbarProps): JSX.Element;

interface ButtonToolbarProps extends React.HTMLAttributes<HTMLElement> {
  /** ARIA role */
  role?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { ButtonToolbar, ButtonGroup, Button } from "react-bootstrap";

<ButtonToolbar aria-label="Toolbar with button groups">
  <ButtonGroup className="me-2" aria-label="First group">
    <Button variant="secondary">1</Button>
    <Button variant="secondary">2</Button>
    <Button variant="secondary">3</Button>
    <Button variant="secondary">4</Button>
  </ButtonGroup>
  
  <ButtonGroup className="me-2" aria-label="Second group">
    <Button variant="secondary">5</Button>
    <Button variant="secondary">6</Button>
    <Button variant="secondary">7</Button>
  </ButtonGroup>
  
  <ButtonGroup aria-label="Third group">
    <Button variant="secondary">8</Button>
  </ButtonGroup>
</ButtonToolbar>

/**
 * SplitButton component for buttons with dropdown
 * @param id - Unique identifier
 * @param title - Button title
 * @param variant - Button variant
 * @param size - Button size
 * @param disabled - Disabled state
 */
function SplitButton(props: SplitButtonProps): JSX.Element;

interface SplitButtonProps extends React.HTMLAttributes<HTMLElement> {
  /** Unique identifier */
  id: string;
  /** Button title */
  title: React.ReactNode;
  /** Button variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
  /** Button size */
  size?: "sm" | "lg";
  /** Disabled state */
  disabled?: boolean;
  /** Dropdown direction */
  drop?: "up" | "down" | "start" | "end";
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { SplitButton, Dropdown } from "react-bootstrap";

<SplitButton
  variant="secondary"
  title="Split Button"
  id="split-button-basic"
  onClick={() => console.log('Main button clicked')}
>
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
  <Dropdown.Item eventKey="3" active>
    Active Item
  </Dropdown.Item>
  <Dropdown.Divider />
  <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>

/**
 * ToggleButton component for toggle functionality
 * @param id - Unique identifier
 * @param type - Input type
 * @param checked - Checked state
 * @param disabled - Disabled state
 * @param name - Input name
 * @param value - Input value
 */
function ToggleButton(props: ToggleButtonProps): JSX.Element;

interface ToggleButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  /** Unique identifier */
  id: string;
  /** Input type */
  type?: "checkbox" | "radio";
  /** Checked state */
  checked?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Input name */
  name?: string;
  /** Input value */
  value?: string | string[] | number;
  /** Button variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
  /** Button size */
  size?: "sm" | "lg";
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ToggleButtonGroup component for grouped toggle buttons
 * @param type - Group type
 * @param name - Group name
 * @param value - Selected value(s)
 * @param onChange - Change handler
 */
function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;

interface ToggleButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
  /** Group type */
  type?: "checkbox" | "radio";
  /** Group name */
  name?: string;
  /** Selected value(s) */
  value?: string | string[];
  /** Change handler */
  onChange?: (value: string | string[], event: React.SyntheticEvent) => void;
  /** Size variant */
  size?: "sm" | "lg";
  /** Vertical layout */
  vertical?: boolean;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

interface ToggleButtonCheckboxProps extends ToggleButtonGroupProps {
  type: "checkbox";
  value?: string[];
  onChange?: (value: string[], event: React.SyntheticEvent) => void;
}

interface ToggleButtonRadioProps extends ToggleButtonGroupProps {
  type: "radio";
  value?: string;
  onChange?: (value: string, event: React.SyntheticEvent) => void;
}

import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";

// Radio button group
const [radioValue, setRadioValue] = useState('1');

const radios = [
  { name: 'Active', value: '1' },
  { name: 'Radio', value: '2' },
  { name: 'Radio', value: '3' },
];

<ToggleButtonGroup type="radio" name="options" value={radioValue} onChange={setRadioValue}>
  {radios.map((radio, idx) => (
    <ToggleButton
      key={idx}
      id={`radio-${idx}`}
      type="radio"
      variant="outline-success"
      name="radio"
      value={radio.value}
      checked={radioValue === radio.value}
    >
      {radio.name}
    </ToggleButton>
  ))}
</ToggleButtonGroup>

// Checkbox button group
const [checkboxValue, setCheckboxValue] = useState([1, 3]);

const checkboxes = [
  { name: 'Checkbox 1', value: '1' },
  { name: 'Checkbox 2', value: '2' },
  { name: 'Checkbox 3', value: '3' },
];

<ToggleButtonGroup type="checkbox" value={checkboxValue} onChange={setCheckboxValue}>
  {checkboxes.map((checkbox, idx) => (
    <ToggleButton
      key={idx}
      id={`checkbox-${idx}`}
      type="checkbox"
      variant="outline-primary"
      name="checkbox"
      value={checkbox.value}
      checked={checkboxValue.includes(checkbox.value)}
    >
      {checkbox.name}
    </ToggleButton>
  ))}
</ToggleButtonGroup>

/**
 * SplitButton component for split buttons with dropdown
 * @param id - Unique identifier  
 * @param title - Button text
 * @param variant - Button variant
 * @param size - Button size
 * @param disabled - Disabled state
 * @param href - Link URL
 * @param target - Link target
 * @param onClick - Button click handler
 * @param drop - Dropdown direction
 * @param as - Button element type
 * @param menuRole - Dropdown menu ARIA role
 * @param renderMenuOnMount - Render menu on mount
 * @param rootCloseEvent - Root close event type
 * @param onToggle - Dropdown toggle handler
 * @param show - Controlled dropdown show state
 */
function SplitButton(props: SplitButtonProps): JSX.Element;

interface SplitButtonProps extends React.HTMLAttributes<HTMLElement> {
  /** Unique identifier */
  id: string;
  /** Button text */
  title: React.ReactNode;
  /** Button variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
  /** Button size */
  size?: "sm" | "lg";
  /** Disabled state */
  disabled?: boolean;
  /** Link URL */
  href?: string;
  /** Link target */
  target?: string;
  /** Button click handler */
  onClick?: (event: React.MouseEvent) => void;
  /** Dropdown direction */
  drop?: "up" | "up-centered" | "down" | "down-centered" | "start" | "end";
  /** Button element type */
  as?: React.ElementType;
  /** Dropdown menu ARIA role */
  menuRole?: string;
  /** Render menu on mount */
  renderMenuOnMount?: boolean;
  /** Root close event type */
  rootCloseEvent?: "click" | "mousedown";
  /** Dropdown toggle handler */
  onToggle?: (isOpen: boolean, event: React.SyntheticEvent, metadata: { source: string }) => void;
  /** Controlled dropdown show state */
  show?: boolean;
  /** Toggle element type */
  toggleAs?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { SplitButton, Dropdown } from "react-bootstrap";

// Basic split button
<SplitButton
  title="Split Button"
  id="segmented-button-dropdown-1"
  onClick={() => console.log('Button clicked')}
>
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
  <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
  <Dropdown.Divider />
  <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</SplitButton>

// Different variants and sizes
<SplitButton
  variant="secondary"
  size="lg"
  title="Large Secondary"
  id="split-button-lg"
>
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
</SplitButton>

// Drop direction variants
<SplitButton
  drop="up"
  variant="info"
  title="Drop Up"
  id="dropdown-button-drop-up"
>
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
</SplitButton>

/**
 * CloseButton component for dismissing components
 * @param variant - Color variant
 * @param disabled - Disabled state
 */
function CloseButton(props: CloseButtonProps): JSX.Element;

interface CloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Color variant */
  variant?: "white";
  /** Disabled state */
  disabled?: boolean;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { CloseButton, Alert } from "react-bootstrap";

// Basic close button
<CloseButton onClick={() => setShow(false)} />

// White variant for dark backgrounds
<CloseButton variant="white" onClick={() => setShow(false)} />

// In an alert
<Alert variant="warning" dismissible onClose={() => setShow(false)}>
  <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
  <p>Change this and that and try again.</p>
</Alert>