Skip to content
Related Articles

Related Articles

Semantic-UI Message States

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI offers many components for users to design their interface. One of them is “Message”.  There are different states of messages. You can use them as per your requirement.

Semantic-UI Message States will let you hide or make the message visible to the user. We can create a UI to show the different states of messages.

Semantic UI Message States Class:

  • hidden: You can hide a message from your UI. It is useful where you need to hide a message with certain conditions. Hide some messages as per your requirements.
  • visible: You can set a message to visible to force itself to be shown as per the requirement. It can be very useful in scenarios where you want to highlight a notice every time your website is opened or show some message permanently.

Syntax:

<div class="ui hidden message">
  ....
</div>

Example 1: The following example demonstrates the hidden message class.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic UI</title>
    <link href=
      rel="stylesheet" />
  </head>
  <body>      
    <div class="ui container">
      <h2 style="color:green">GeeksforGeeks</h2>
      <b>
<p>Semantic UI Message states</p>
</b>
       
<p>No messages shown.</p>
 
 
      <div class="ui hidden message">
          
<p>Please hide this message</p>
 
      </div>
    </div>
  </body>
</html>


Output:

Semantic-UI Message States

Semantic-UI Message States

Example 2: The following example demonstrates the visible message class.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic UI</title>
    <link href=
      rel="stylesheet" />
  </head>
 
  <body>          
    <div class="ui container">
      <h2 style="color:green">GeeksforGeeks</h2>
      <b>
<p>Semantic UI Message states</p>
</b>
         
<p>Messages shown .</p>
 
      <div class="ui visible message">
          
<p>Please show this message . </p>
 
      </div>
    </div>
  </body>
</html>


Output:

Semantic-UI Message States

Semantic-UI Message States

Reference: https://semantic-ui.com/collections/message.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!