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

Diagramers Admin Template - React starter for admin dashboards.

import CsLineIcons from 'cs-line-icons/CsLineIcons';
import React from 'react';
import { Button, FormControl, InputGroup } from 'react-bootstrap';

const InputGroupButtonAddons = () => {
  return (
    <>
      <InputGroup className="mb-3">
        <Button variant="outline-secondary" id="button-addon1">
          Button
        </Button>
        <FormControl aria-label="Example text with button addon" aria-describedby="basic-addon1" />
      </InputGroup>

      <InputGroup className="mb-3">
        <FormControl placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" />
        <Button variant="outline-secondary" id="button-addon2">
          Button
        </Button>
      </InputGroup>

      <InputGroup className="mb-3">
        <Button variant="outline-secondary">Button</Button>
        <Button variant="outline-secondary">Button</Button>
        <FormControl aria-label="Example text with two button addons" />
      </InputGroup>

      <InputGroup>
        <FormControl placeholder="Recipient's username" aria-label="Recipient's username with two button addons" />
        <Button variant="outline-secondary"><CsLineIcons icon="check"/></Button>
        <Button variant="outline-secondary"><CsLineIcons icon="close"/></Button>
        {/* <Button variant="outline-secondary">Button</Button> */}
      </InputGroup>
    </>
  );
};

export default InputGroupButtonAddons;