tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

—

Pending

Overview

Eval results

Files

Button Components

Name: tessl/npm-reactstrap
Author: tessl

Button elements including individual buttons, button groups, dropdown buttons, and interactive button components for user actions.

Capabilities

Button

Bootstrap button component with extensive customization options for colors, sizes, states, and behaviors.

/**
 * Bootstrap button component
 * @param props.active - Manually set button visual state to active
 * @param props.aria-label - ARIA label for accessibility
 * @param props.block - Make button full-width (deprecated in Bootstrap 5, use className="d-block w-100")
 * @param props.color - Button color theme (primary, secondary, success, info, warning, danger, light, dark)
 * @param props.disabled - Disable the button
 * @param props.outline - Use outline button style
 * @param props.size - Button size ('sm' or 'lg')
 * @param props.tag - HTML element to render as (default: 'button')
 * @param props.innerRef - Ref forwarding
 * @param props.close - Render as close button (uses CloseButton internally)
 * @param props.onClick - Click event handler
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Button content
 */
function Button(props: {
  active?: boolean;
  'aria-label'?: string;
  block?: boolean;
  color?: string;
  disabled?: boolean;
  outline?: boolean;
  size?: 'sm' | 'lg';
  tag?: React.ElementType;
  innerRef?: React.Ref;
  close?: boolean;
  onClick?: (event: React.MouseEvent) => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

ButtonGroup

Container component for grouping buttons together with consistent spacing and alignment.

/**
 * Button group container
 * @param props.size - Size for all buttons in group ('sm' or 'lg')
 * @param props.vertical - Stack buttons vertically
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.role - ARIA role (default: 'group')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Button components
 */
function ButtonGroup(props: {
  size?: 'sm' | 'lg';
  vertical?: boolean;
  tag?: React.ElementType;
  role?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

ButtonToolbar

Toolbar component for combining multiple button groups with proper spacing.

/**
 * Button toolbar for combining button groups
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.role - ARIA role (default: 'toolbar')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - ButtonGroup components and other elements
 */
function ButtonToolbar(props: {
  tag?: React.ElementType;
  role?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

ButtonToggle

Toggle button component that maintains active/inactive state for on/off interactions.

/**
 * Toggle button component
 * @param props.active - Button active/pressed state
 * @param props.color - Button color theme
 * @param props.disabled - Disable the button
 * @param props.outline - Use outline button style
 * @param props.size - Button size ('sm' or 'lg')
 * @param props.tag - HTML element to render as (default: 'button')
 * @param props.innerRef - Ref forwarding
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Button content
 */
function ButtonToggle(props: {
  active?: boolean;
  color?: string;
  disabled?: boolean;
  outline?: boolean;
  size?: 'sm' | 'lg';
  tag?: React.ElementType;
  innerRef?: React.Ref;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

ButtonDropdown

Button with dropdown functionality combining button and dropdown menu behavior.

/**
 * Button with dropdown functionality
 * @param props.disabled - Disable the button and dropdown
 * @param props.direction - Dropdown direction ('up', 'down', 'left', 'right')
 * @param props.group - Apply button group styling
 * @param props.isOpen - Control dropdown open state
 * @param props.nav - Apply navigation styling
 * @param props.addonType - Addon type for input groups
 * @param props.size - Button size ('sm' or 'lg')
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.toggle - Function to toggle dropdown state
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - DropdownToggle and DropdownMenu components
 */
function ButtonDropdown(props: {
  disabled?: boolean;
  direction?: 'up' | 'down' | 'left' | 'right';
  group?: boolean;
  isOpen: boolean;
  nav?: boolean;
  addonType?: string;
  size?: 'sm' | 'lg';
  tag?: React.ElementType;
  toggle: () => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

CloseButton

Dedicated close button component for dismissible content like alerts and modals.

/**
 * Close button component
 * @param props.tag - HTML element to render as (default: 'button')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 */
function CloseButton(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  [key: string]: any;
}): JSX.Element;

Uncontrolled Components

UncontrolledButtonDropdown

Self-managing button dropdown that handles its own open/close state internally.

/**
 * Self-managing button dropdown component
 * @param props.defaultOpen - Initial open state
 * @param props.onToggle - Callback when dropdown state changes
 * @param ...otherProps - Same props as ButtonDropdown except isOpen and toggle
 */
function UncontrolledButtonDropdown(props: {
  defaultOpen?: boolean;
  onToggle?: (isOpen: boolean) => void;
  disabled?: boolean;
  direction?: 'up' | 'down' | 'left' | 'right';
  group?: boolean;
  nav?: boolean;
  addonType?: string;
  size?: 'sm' | 'lg';
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Usage Examples

Basic Buttons

import { Button } from 'reactstrap';

function BasicButtons() {
  return (
    <div>
      <Button color="primary">Primary</Button>{' '}
      <Button color="secondary">Secondary</Button>{' '}
      <Button color="success">Success</Button>{' '}
      <Button color="info">Info</Button>{' '}
      <Button color="warning">Warning</Button>{' '}
      <Button color="danger">Danger</Button>{' '}
      <Button color="light">Light</Button>{' '}
      <Button color="dark">Dark</Button>
    </div>
  );
}

Outline Buttons

function OutlineButtons() {
  return (
    <div>
      <Button outline color="primary">Primary</Button>{' '}
      <Button outline color="secondary">Secondary</Button>{' '}
      <Button outline color="success">Success</Button>{' '}
      <Button outline color="info">Info</Button>{' '}
      <Button outline color="warning">Warning</Button>{' '}
      <Button outline color="danger">Danger</Button>
    </div>
  );
}

Button Sizes

function ButtonSizes() {
  return (
    <div>
      <Button color="primary" size="lg">Large button</Button>{' '}
      <Button color="secondary" size="lg">Large button</Button>
      <br />
      <Button color="primary">Default button</Button>{' '}
      <Button color="secondary">Default button</Button>
      <br />
      <Button color="primary" size="sm">Small button</Button>{' '}
      <Button color="secondary" size="sm">Small button</Button>
    </div>
  );
}

Button States

function ButtonStates() {
  return (
    <div>
      <Button color="primary" active>Active state</Button>{' '}
      <Button color="primary" disabled>Disabled</Button>{' '}
      <Button color="primary" onClick={() => alert('Clicked!')}>
        Click me
      </Button>
    </div>
  );
}

Block Buttons (Bootstrap 5 approach)

function BlockButtons() {
  return (
    <div className="d-grid gap-2">
      <Button color="primary" className="btn-block">Block button</Button>
      <Button color="secondary" className="btn-block">Block button</Button>
    </div>
  );
}

Button Groups

import { ButtonGroup, Button } from 'reactstrap';

function ButtonGroups() {
  return (
    <div>
      <ButtonGroup>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup size="sm">
        <Button color="secondary">Small</Button>
        <Button color="secondary">Small</Button>
        <Button color="secondary">Small</Button>
      </ButtonGroup>
      <br />
      <ButtonGroup size="lg">
        <Button color="info">Large</Button>
        <Button color="info">Large</Button>
        <Button color="info">Large</Button>
      </ButtonGroup>
    </div>
  );
}

Vertical Button Group

function VerticalButtonGroup() {
  return (
    <ButtonGroup vertical>
      <Button>Top</Button>
      <Button>Middle</Button>
      <Button>Bottom</Button>
    </ButtonGroup>
  );
}

Button Toolbar

import { ButtonToolbar, ButtonGroup, Button } from 'reactstrap';

function ButtonToolbars() {
  return (
    <ButtonToolbar>
      <ButtonGroup className="me-2">
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
        <Button>4</Button>
      </ButtonGroup>
      <ButtonGroup className="me-2">
        <Button>5</Button>
        <Button>6</Button>
        <Button>7</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button>8</Button>
      </ButtonGroup>
    </ButtonToolbar>
  );
}

Toggle Buttons

import { ButtonToggle } from 'reactstrap';

function ToggleButtons() {
  const [active, setActive] = useState(false);

  return (
    <div>
      <ButtonToggle 
        color="primary" 
        active={active}
        onClick={() => setActive(!active)}
      >
        {active ? 'Active' : 'Inactive'}
      </ButtonToggle>
    </div>
  );
}

Button Dropdown

import { 
  ButtonDropdown, 
  DropdownToggle, 
  DropdownMenu, 
  DropdownItem 
} from 'reactstrap';

function ButtonDropdowns() {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <ButtonDropdown 
      isOpen={dropdownOpen} 
      toggle={() => setDropdownOpen(!dropdownOpen)}
    >
      <DropdownToggle caret color="primary">
        Button Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

Split Button Dropdown

function SplitButtonDropdown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <ButtonDropdown 
      isOpen={dropdownOpen} 
      toggle={() => setDropdownOpen(!dropdownOpen)}
    >
      <Button color="primary">Split Button</Button>
      <DropdownToggle split color="primary" />
      <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

Uncontrolled Button Dropdown

import { 
  UncontrolledButtonDropdown, 
  DropdownToggle, 
  DropdownMenu, 
  DropdownItem 
} from 'reactstrap';

function UncontrolledExample() {
  return (
    <UncontrolledButtonDropdown>
      <DropdownToggle caret color="secondary">
        Uncontrolled
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
      </DropdownMenu>
    </UncontrolledButtonDropdown>
  );
}

Install with Tessl CLI