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>
</>
);
}
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>
</>
);
}
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>
</>
);
}
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>
</>
);
}