react bootstrap 5 buttons example

React Bootstrap 5 Buttons Example

updated 07/10/22 By frontendshape

In this tutorial, we will create and design buttons using Bootstrap 5 and React. You can use bootstrap to create different types of buttons like Primary Secondary Success Failure Inverse Alert Link with icons, or a custom icon in your react app.

Install & Setup Vite + React + Typescript + Bootstrap 5


React Bootstrap v5.2 Buttons Design Example

1. bootstrap 5 simple new design button.

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function App() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}
react bootstrap 5 buttons

react bootstrap 5 buttons


2. React bootstrap 5 outline button.

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function App() {
  return (
    <>
      <Button variant="outline-primary">Primary</Button>{' '}
      <Button variant="outline-secondary">Secondary</Button>{' '}
      <Button variant="outline-success">Success</Button>{' '}
      <Button variant="outline-warning">Warning</Button>{' '}
      <Button variant="outline-danger">Danger</Button>{' '}
      <Button variant="outline-info">Info</Button>{' '}
      <Button variant="outline-light">Light</Button>{' '}
      <Button variant="outline-dark">Dark</Button>
    </>
  );
}
react bootstrap 5 outline button

react bootstrap 5 outline button


3. React bootstrap 5 button size small medium and large.

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function App() {
  return (
    <>
      <div className="mb-2">
        <Button variant="primary" size="lg">
          Large button
        </Button>{' '}
        <Button variant="secondary" size="lg">
          Large button
        </Button>
      </div>
      <div className="mb-2">
        <Button variant="primary">Medium button</Button>{' '}
        <Button variant="secondary">Medium button</Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small button
        </Button>{' '}
        <Button variant="secondary" size="sm">
          Small button
        </Button>
      </div>
    </>
  );
}
react bootstrap 5 buttons size

react bootstrap 5 buttons size


4. React bootstrap 5 active state button.

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function App() {
  return (
    <>
      <Button variant="primary" size="lg" active>
        Primary button
      </Button>{' '}
      <Button variant="secondary" size="lg" active>
        Button
      </Button>
    </>
  );
}


5. React bootstrap 5 disabled button.

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function App() {
  return (
    <>
      <Button variant="primary" size="lg" disabled>
        Primary button
      </Button>{' '}
      <Button variant="secondary" size="lg" disabled>
        Button
      </Button>{' '}
      <Button href="#" variant="secondary" size="lg" disabled>
        Link
      </Button>
    </>
  );
}
react bootstrap 5 disabled button example

react bootstrap 5 disabled button example