Bootstrap 5 Buttons Disabled state

Last Updated : 07 Nov, 2022

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>