Bootstrap 5 Buttons Disabled state

The disabled option is used to create a button with the disabled state. It is a boolean attribute for any button element. The disabled button means the button is inactive and it will not be active after clicking or hovering the button.

Disabled state Attribute:

disabled: This attribute is used to create the disabled state button. This attribute makes the pointer-events: none to prevent the hover and active states from triggering.

Disabled state Class:

.disabled: This class is used to create the disabled button.

Note: Since, <a> tag does not support the disabled attribute, so we will use the disabled class to disable the <a> element button. The disabled <a> element should include aria-disabled="true" attribute to represent the state of the element.

Syntax:

// Disabled Button
<button type="button" class="btn btn-*" disabled>
    Disabled button
</button>

// Disabled Link
<a href="#" class="btn btn-* disabled" tabindex="-1" 
    role="button" aria-disabled="true">
    Disabled link
</a>

Example 1: In this example, we will use the disabled attribute to disable the buttons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Buttons Disabled state</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity=
        "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Buttons Disabled state</h2>

        <h3>Disabled Buttons</h3>
        <button type="button" 
            class="btn btn-primary" disabled>
            Primary Disabled Button
        </button>
        <button type="button" 
            class="btn btn-secondary" disabled>
            Secondary Disabled Button
        </button>
        <button type="button" 
            class="btn btn-success disabled">
            Success Disabled Button
        </button>
        <button type="button" 
            class="btn btn-danger disabled">
            Danger Disabled Button
        </button>
        <br><br>

        <h3>Active Buttons</h3>
        <button type="button" 
            class="btn btn-warning">
            Warning Active Button
        </button>
        <button type="button" 
            class="btn btn-info">
            Info Active Button
        </button>
        <button type="button" 
            class="btn btn-light">
            Light Active Button
        </button>
        <button type="button" 
            class="btn btn-dark">
            Dark Active Button
        </button>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will use the .disabled class to disable the anchor link buttons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Buttons Disabled state</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity=
        "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Buttons Disabled state</h2>

        <h3>Disabled Links as Buttons</h3>
        <a href="#" class="btn btn-primary disabled" 
            tabindex="-1" role="button" aria-disabled="true">
            Primary Disabled link
        </a>

        <a href="#" class="btn btn-secondary disabled" 
            tabindex="-1" role="button" 
            aria-disabled="true">
            Secondary Disabled link
        </a>

        <a href="#" class="btn btn-success disabled" 
            tabindex="-1" role="button" 
            aria-disabled="true">
            Success Disabled link
        </a>

        <a href="#" class="btn btn-danger disabled" 
            tabindex="-1" role="button" 
            aria-disabled="true">
            Danger Disabled link
        </a>
        <br><br>

        <h3>Active Links as Buttons</h3>
        <a href="#" class="btn btn-warning" 
            tabindex="-1" role="button" 
            aria-disabled="false">
            Warning Active link
        </a>

        <a href="#" class="btn btn-info" 
            tabindex="-1" role="button" 
            aria-disabled="false">
            Info Active link
        </a>

        <a href="#" class="btn btn-light" 
            tabindex="-1" role="button" 
            aria-disabled="false">
            Light Active link
        </a>

        <a href="#" class="btn btn-dark" 
            tabindex="-1" role="button" 
            aria-disabled="false">
            Dark Active link
        </a>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#disabled-state

Bootstrap 5 Buttons Disabled state

Explore