@diagramers/admin/src/views/interface/forms/input-group/InputGroupButtonWithDropdowns.js

Diagramers Admin Template - React starter for admin dashboards.

import React from 'react';
import { Dropdown, DropdownButton, FormControl, InputGroup } from 'react-bootstrap';

const InputGroupButtonWithDropdowns = () => {
  return (
    <>
      <InputGroup className="mb-3">
        <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-1">
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
        <FormControl aria-label="Text input with dropdown button" />
      </InputGroup>

      <InputGroup className="mb-3">
        <FormControl aria-label="Text input with dropdown button" />

        <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-2" align="end">
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
      </InputGroup>

      <InputGroup>
        <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-3">
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
        <FormControl aria-label="Text input with 2 dropdown buttons" />
        <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-4" align="end">
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
      </InputGroup>
    </>
  );
};

export default InputGroupButtonWithDropdowns;