Open In App

Primer CSS Select Menu Message

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Primer CSS offers Select Menu that has superior assistance for filtering, navigation, and so on. In this article, we will discuss the Select Menu Message. Select Menu Message uses SelectMenu-message class to show various messages to the user.

Primer CSS Select Menu Message class:

  • SelectMenu-message: This class is used to display any messages to the end-user.

Syntax:

<details class="details-reset details-overlay" open>
  <summary class="btn" aria-haspopup="true">
     ...
  </summary>
      
  <div class="SelectMenu">
    <div class="SelectMenu-modal">
      <div class="SelectMenu-list">
        <div class="SelectMenu-message 
          color-bg-success color-fg-success ||
          color-bg-danger color-fg-danger">
          ...
        </div>
        <button class="SelectMenu-item" 
          role="menuitem">
          ...
        </button>
        ...Select Menu
      </div>
    </div>
  </div>
</details>

Example 1: This example demonstrates the use of Primer CSS Select Menu message with an error message. 

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Select Menu message </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
  <div class="mt-5">
    <h1 class="color-fg-success"> GeeksforGeeks </h1>
    <h3> Primer CSS Select Menu message </h3>
      
    <details class="details-reset details-overlay" open>
      <summary class="btn" aria-haspopup="true">
        Select any course to continue.
      </summary>
      <div class="SelectMenu">
        <div class="SelectMenu-modal">
          <div class="SelectMenu-list">
            <div class="SelectMenu-message 
              color-bg-danger color-fg-danger">
              OOP's! something went wrong.
            </div>
            <button class="SelectMenu-item" 
              role="menuitem"> DSA
            </button>
            <button class="SelectMenu-item" 
              role="menuitem"> DBMS
            </button>
            <button class="SelectMenu-item" 
              role="menuitem"> Operating System
            </button>
          </div>
        </div>
      </div>
    </details>
  </div>
</body>
  
</html>


Output:

Primer CSS Select Menu Message

Example 2: This example demonstrates the use of Primer CSS Select Menu message with a success message. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Select Menu message </title>
    
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
  <div class="mt-5">
    <h1 class="color-fg-success"> GeeksforGeeks </h1>
    <h3> Primer CSS Select Menu message </h3>
      
    <details class="details-reset details-overlay" open>
      <summary class="btn" aria-haspopup="true">
        Select any course to continue.
      </summary>
      <div class="SelectMenu">
        <div class="SelectMenu-modal">
          <div class="SelectMenu-list">
            <div class="SelectMenu-message 
              color-bg-success color-fg-success">
              Well done!
            </div>
            <button class="SelectMenu-item" 
              role="menuitem"> DSA
            </button>
            <button class="SelectMenu-item" 
              role="menuitem"> DBMS
            </button>
            <button class="SelectMenu-item" 
              role="menuitem"> Operating System
            </button>
          </div>
        </div>
      </div>
    </details>
  </div>
</body>
  
</html>


Output:

Primer CSS Select Menu Message

Reference: https://primer.style/css/components/select-menu#message



Last Updated : 19 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads