Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
In this article, we will learn about Primer CSS Select menu Disabled option. In Primer CSS, Disabled is an attribute that can be used with <buttons> as well as <a> tags.
Primer CSS Disabled Attribute: In order to disable a list item, use the disabled attribute for <button>and For <a> replace the href with an aria-disabled=”true” attribute.
Syntax:
<div class="SelectMenu-list">
<button class="SelectMenu-item"
role="menuitem" disabled>Disabled
</button>
<a class="SelectMenu-item" role="menuitem"
aria-disabled="true">
</div>Example 1: In this example, we will simply show how a button can be disabled. We have added 2 buttons; one is enabled and the other is disabled. Disabling a button means, even if we click on that button, it won’t trigger any event
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3> Primer CSS Disabled</h3>
<div class="SelectMenu-list">
<button class="SelectMenu-item" role="menuitem">
Button Enabled
</button>
<button class="SelectMenu-item" role="menuitem" disabled>
Button Disabled
</button>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use aria-disabled=”true”, this will disable a link. This simply means, that even if we click on that link, it won’t redirect anywhere.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3> Primer CSS Disabled</h3>
<div class="SelectMenu-list">
<a class="SelectMenu-item" role="menuitem" href="#">
GFG Best Articles here</a>
<a class="SelectMenu-item" role="menuitem" aria-disabled="true"> #Link Disabled </a>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/select-menu#disabled