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

Diagramers Admin Template - React starter for admin dashboards.

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

const InputGroupSegments = () => {
  return (
    <>
      <InputGroup className="mb-3">
        <SplitButton variant="outline-secondary" title="Action" id="segmented-button-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>
        </SplitButton>
        <FormControl aria-label="Text input with dropdown button" />
      </InputGroup>

      <InputGroup className="mb-3">
        <FormControl aria-label="Text input with dropdown button" />
        <SplitButton variant="outline-secondary" title="Action" id="segmented-button-dropdown-2" alignRight>
          <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>
        </SplitButton>
      </InputGroup>
    </>
  );
};

export default InputGroupSegments;