Button

The Button component is a clickable element that triggers an action or a navigation. The Button component can have different types and different variants. The Button component can also have icons, labels, or both.

You can find the Button component in the src/views/Buttons.jsx file.

Examples

Use any of the available button style types to quickly create a styled button. Just modify the variant prop. Button Preview

Preview

Result

Code

Buttons

import Button from "react-bootstrap/Button";

function MyComponent() {
    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>
        </>
    );
}

export default MyComponent;

Outline

For a lighter touch, Buttons also come in outline-* variants with no background color. Button Preview

Preview

Result

Code

Buttons

import Button from "react-bootstrap/Button";

function MyComponent() {
    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>
            <Button variant="outline-link">Link</Button>
        </>
    );
}

export default TypesExample;

Sizes

Defarent sizes button are available. Simply add size="lg", size="sm" for additional sizes. Button Preview

Preview

Result

Code

Buttons

import Button from "react-bootstrap/Button";

function MyComponent() {
    return (
        <>
            <Button variant="primary" size="lg">Large Button</Button>
            <Button variant="primary">Normal Button</Button>
            <Button variant="primary" size="sm">Small Button</Button>
        </>
    );
}

export default TypesExample;

Props

Name	Type	Default	Description
variant	string	primary	A string that specifies the type and the variant of the button. You can choose variety of visual variants such as: primary, secondary, success, danger, warning, info, dark, light, link as well as outline versions (prefixed by outline-*) outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-dark, outline-light. The default value is primary
size	sm, lg		A string that specifies the size of the button. You can choose from two options: sm or lg.
onClick	func		A function that is called when the button is clicked. The function receives the event object as the argument. You can use this prop to perform any action or logic when the button is clicked. For example, you can use onClick to navigate to another page, submit a form, or open a modal.
active	boolean	false	A boolean that indicates whether the button is active or not. If active is true, the button will have a darker background color and a shadow effect. If active is false, the button will have a normal appearance. The default value is false
disabled	boolean	false	A boolean that indicates whether the button is disabled or not. If disabled is true, the button will have a lighter background color and a disabled cursor. If disabled is false, the button will be enabled and clickable. The default value is false.

For more props please visit to react-bootstrap